vue之全局守卫
import Vue from 'vue';
import Router from 'vue-router';
import LoginPage from '@/pages/login';
import HomePage from '@/pages/home';
import GoodsListPage from '@/pages/good-list';
import GoodsDetailPage from '@/pages/good-detail';
import CartPage from '@/pages/cart';
import ProfilePage from '@/pages/profile'; Vue.use(Router) const router = new Router({
routes: [
{
path: '/', // 默认进入路由
redirect: '/home' //重定向
},
{
path: '/login',
name: 'login',
component: LoginPage
},
{
path: '/home',
name: 'home',
component: HomePage
},
{
path: '/good-list',
name: 'good-list',
component: GoodsListPage
},
{
path: '/good-detail',
name: 'good-detail',
component: GoodsDetailPage
},
{
path: '/cart',
name: 'cart',
component: CartPage
},
{
path: '/profile',
name: 'profile',
component: ProfilePage
},
{
path: '*', // 错误路由
redirect: '/home' //重定向
},
]
}); // 全局路由守卫
router.beforeEach((to, from, next) => {
console.log('navigation-guards');
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
//如果next为空则路由正常进行跳转,如果next不为空,则进行跳转时,会中断 const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];
let isLogin = global.isLogin; // 是否登录,一般从storage中读取
// 未登录状态;当路由到nextRoute指定页时,跳转至login
if (nextRoute.indexOf(to.name) >= 0) {
if (!isLogin) {
console.log('what fuck');
router.push({ name: 'login' })
}
}
// 已登录状态;当路由到login时,如果已经登录过,则跳转至home
if (to.name === 'login') {
if (isLogin) {
router.push({ name: 'home' });
}
}
next();
}); export default router;
vue之全局守卫的更多相关文章
- Vue 2.0 路由全局守卫
vue2.0 实现导航守卫(路由守卫) 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navi ...
- vue --- 全局守卫
vue2.0 实现导航守卫(路由守卫) 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navi ...
- vue中使用router全局守卫实现页面拦截
一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最 ...
- 添加一个vue全局守卫,主要用于用户登录时候验证
//注册一个全局守卫,作用是在路由跳转钱,对路由进行判断,防止未登录用户跳转到其他页面 router.beforeEach((to, from, next) => { let token = l ...
- vue 定义全局函数,监听android返回键事件
vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...
- 生命周期函数以及vue的全局注册
beforeCreate 在创造实例之前 created 创造实例以后 beforeMount 在挂载前 render 渲染节点到页面上 //将虚拟dom数组渲染出来 mounted 挂载以后 bef ...
- vue入门全局配置
全局配置 Vue.config 是一个对象,包含 Vue 的全局配置.可以在启动应用之前修改下列属性: silent 类型:boolean 默认值:false 用法: Vue.config.silen ...
- vue 自定义全局方法
import {myfun} from '../static/js/test.js' //se6的正确写法export default {methods:{ diyfun:function () { ...
- 黑马vue---28、vue中全局过滤器的基本使用
黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...
随机推荐
- CentOS安装wkhtmltopdf及解决中文支持问题
安装wkhtmltopdf,先下载 wkhtmltox-0.12.2.1_linux-centos6-amd64.rpm yum install -y wkhtmltox-0.12.2.1_linu ...
- 解决node-sass安装不了的问题
1.下载https://github.com/sass/node-sass-binaries/blob/master/win32-x64-48_binding.node到E:\primeng\lib目 ...
- 转载- ACM常见的各种说法
from : http://blog.csdn.net/qq_15015129/article/details/52738184 1.答案错误 —— wrong answer 就是最常见的.这个没办法 ...
- kuangbin大佬模板(侵删)- hdu 2222
2017-08-13 19:54:08 kuangbin的AC自动机模板 可以直接过 入门题目 hdu2222 #include<cstdio> #include<cstring&g ...
- ABP 源码分析汇总之 IOC
IOC的优点: 1. 依赖接口,而非实现,如下代码, 这样的好处就是,客户端根本不知道PersonService的存在,如果我们换一下IPersonService的实现,客户端不用任何修改, 说的简单 ...
- Javascript 十移跳转页面
<srcipty> var t = 10; function openwin(){ t -= 1; if( t==0){ location.href='prototype.html'; } ...
- git 提交作业流程
git 提交作业流程,主要分为4个步骤 # 拉取远程git最新版本到本地,每次都可以先执行这条命令,因为会有其他同学更新仓库 git pull # add需要上传的文件,那个文件修改或者新增的,就ad ...
- zsh 安装powerline 主题特效
查看当前使用的shell脚本是哪一种 echo $0 1. 安装Powerline 使用pip指令,安装方法: pip install powerline-status 如果没有,则先 ...
- syslinux启动盘制作
# <font color=DarkCyan >syslinux启动盘制作</font> # ### 准备工具 ### 1. BOOTICEx64 软件 ##分区引导制作工具 ...
- leetcode 720. Longest Word in Dictionary
Given a list of strings words representing an English Dictionary, find the longest word in words tha ...