vue项目初始化到登录login页面的示例

如下所示：

export default new Router({
 routes: [
	  {
	   path: '/',
	   redirect:'/login',
	  },
	  {
	   path: '/login',
	   alias:'/accounts/login',
	   name: '登录',
	   component: () => import('@/views/accounts/login')
	  }
  ]

``

嗯 就这样写就可以啦 我向来都是简单粗暴~~

以上这篇vue项目初始化到登录login页面的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue登录注册并保持登录状态的方法

    关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法. 项目中有一些路由是需要登录才可以进入的,比如首页,个人中心等等 有一些路由是不需要登录就可以进入,比如登录页,注册页,忘记密码等等 那如何判断路由是否需要登录呢?就要在路由JS里面做文章 在router.js中添加meta区分 比如登录注册页面,不需要登录即可进入,那么我们把meta中的isLogin标志设置

  • 前端Vue项目详解--初始化及导航栏

    前端Vue项目详解--初始化及导航栏

    一.项目初始化 创建webpack模板项目如下所示: MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project name luffy_project ? Project description A Vue.js project ? Author hqs ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your cod

  • vue-router判断页面未登录自动跳转到登录页的方法示例

    1.定义路由的时候配置meta属性,requireAuth用来标记跳转的这个路由是否需要检测登录 下面的两个页面,登录页不需要检测,首页需要检测 const routers = [ { path: '/', component: App, children: [ { path: '/login', component: Login, meta: { title: '登录' } }, { path: '/home', component: Home, meta: { title: '首页', re

  • Vue中的验证登录状态的实现方法

    Vue项目中实现用户登录及token验证 先说一下我的实现步骤: 使用easy-mock新建登录接口,模拟用户数据 使用axios请求登录接口,匹配账号和密码 账号密码验证后, 拿到token,将token存储到sessionStorage中,并跳转到首页 前端每次跳转时,就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面. 注销后,就清除sessionStorage里的token信息

  • vue实现登录后页面跳转到之前页面

    在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发401拦截返回登录界面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢? 先说一下我们需要用到的几个API: 1.router.currentRoute:当前的路由信息对象,我们可以通过router.currentRoute.fullPath获得解析后的 URL,包含查询参数和 hash 的完整路径,如果要访问的页面的路由有命名(name)的话,可以通过router.currentRoute.

  • vue实现未登录跳转到登录页面的方法

    环境:vue 2.9.3; webpack;vue-router 目的:实现未登录跳转 例子:直接在url地址栏输入...../home,但是这个页面要求需要登陆之后才能进入,判断的值就通过登陆之后给本地缓存存入的token判断,如果没有就跳转到登录页面,有的话就打开. 图示: 1.直接在url地址栏输入http://127.0.0.1:9000/#/home,但是页面会直接跳转到登录页,而且会带上参数. --------------------------------------------分

  • vue项目初始化到登录login页面的示例

    如下所示: export default new Router({ routes: [ { path: '/', redirect:'/login', }, { path: '/login', alias:'/accounts/login', name: '登录', component: () => import('@/views/accounts/login') } ] `` 嗯 就这样写就可以啦 我向来都是简单粗暴~~ 以上这篇vue项目初始化到登录login页面的示例就是小编分享给大家的全

  • 在vue项目中利用popstate处理页面返回的操作介绍

    需求背景:项目中需要做一个返回确认,避免用户误触返回键而退出当前页面. 原理:利用history和浏览器刷新popstate状态 实现: 1.在mounted() 阶段判断并添加popstate事件监听,History.pushState()(参数:一个状态对象,一个标题(现在被忽略了),以及一个可选的URL地址), 注意:IOS版的微信,是会立即触发popstate事件,所以需要pageshow做下处理,(当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件.(这包括了后退/

  • vue项目中微信登录的实现操作

    1.下载组件 wxlogin npm install vue-wxlogin --save 2.引入组件,给组件传参 3.重定向的url应该是微信登录官网中的微信授权作用域 4.如果url里面有端口号,微信授权作用里面也要有 5.重定向的url:需要在http://tool.chinaz.com/tools/urlencode.aspx中转码 6.微信登录成功后,会自动重定向到新地址,此时的地址栏中就有code参数 7.如果报错说不能从组件跳到页面,那就找到wxlogin组件里面的iframe标

  • vue项目实现记住密码到cookie功能示例(附源码)

    vue项目实现记住密码到cookie功能示例(附源码)

    本文介绍了vue项目实现记住密码到cookie功能示例,分享给大家,具体如下: 登陆页面 实现功能: 1.记住密码勾选,点登陆时,将账号和密码保存到cookie,下次登陆自动显示到表单内 2.不勾选,点登陆时候则清空之前保存到cookie的值,下次登陆需要手动输入 大体思路就是通过存/取/删cookie实现的:每次进入登录页,先去读取cookie,如果浏览器的cookie中有账号信息,就自动填充到登录框中,存cookie是在登录成功之后,判断当前用户是否勾选了记住密码,如果勾选了,则把账号信息存

  • vue项目中使用bpmn-自定义platter的示例代码

    内容概述 本系列"vue项目中使用bpmn-xxxx"分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下.如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文 前情提要 经过前四篇的学习,我们能够实现bpmn基本绘图.预览.为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比: 我

  • Vue项目实现html5图片上传的示例代码

    Vue项目实现html5图片上传的示例代码

    目录 图例 1.选择图片 2.预览图片 2.1添加图片预览代码 两种方法的对比 3.裁剪图片 4.上传 选择图片 -> 预览图片 -> 裁剪图片 -> 上传图片 我会以事例贯穿图片接下来,就详细的介绍每个步骤具体实现. 图例 1.选择图片 选择图片有什么好讲的呢?不就一个 input[type=file] ,然后点击就可以了吗?确实是这样的,但是,我们想要做得更加的友好一些,比如需要过滤掉非图片文件, 或只允许从摄像头拍照获取图片等,还是需要进行一些简单配置的. 下面就先来看看最简单的选

  • vue项目中扫码支付的实现示例(附demo)

    vue项目中扫码支付的实现示例(附demo)

    目录 需求背景 思路分析 UI展示 开始使用 一 编写支付组件模板 二 支付组件的JS相关代码和说明 附:组件JS完整的源码 需求背景 市场报告列表展示的报告有两种类型,一种是免费报告,另一种是付费报告.免费报告用户可以直接查看,付费报告需要用户购买之后才能查看. 思路分析 点击查看为付费报告,弹出支付二维码. 创建订单,二维码进行倒计时,其展示5秒后开始监听支付回调结果,频次为五秒一次. 倒计时第一次倒数到0秒,提醒二维码过期让用户点击刷新二维码. 继续倒计时并开始监听支付回调结果. 刷新之后

  • vue项目网站全局置灰功能实现示例详解

    目录 1.前端独立实现 2.通过后台管理控制设置网站的整体置灰样式 1.前端独立实现 两种不同的逻辑,一种是前端自己实现,一种是结合后台管理系统来控制,网站是正常还是置灰. 直接在public文件夹下的index.html文件的html标签里加上style="filter:grayscale(100%)",总的就是<html style="filter:grayscale(100%)"> 2.通过后台管理控制设置网站的整体置灰样式 1.先给public文

  • vue项目中路由跳转页面不变问题及解决

    目录 vue中路由跳转页面不变 问题 解决方法 路由跳转页面不刷新.this.$router.go(-1)不生效 解决思路 vue中路由跳转页面不变 问题 今天在开发vue移动端项目的过程中发现了一个bug,就是当按返回键的时候页面并没有发生变化,一开始还以为是没有监听到返回事件,但是通过测试之后发现返回事件监听成功了,路由也发生了变化,相应事件也触发了,就是页面视图没有跟着改变. 解决方法 项目中路由设置的是 hash模式,所以对 hashchange 事件进行监听(hash模式下,路由的变化

  • vue.js中实现登录控制的方法示例

    本文实例讲述了vue.js中实现登录控制的方法.分享给大家供大家参考,具体如下: vue中使用vue-router实现登录的控制在做后台管理系统中很常见,但是不想之前熟悉的流程那样,不过只要大家理解vue-router的使用也是很好实现的. 首先我们需要编写登录页面和主页面: <template> <div class="login"> <table width="100%" height="100%"> &l

随机推荐