码迷,mamicode.com
首页 > 其他好文 > 详细

vue 路由守卫

时间:2019-12-24 20:42:12      阅读:50      评论:0      收藏:0      [点我收藏+]

标签:字段   www   ons   用户   添加   nbsp   next   文件夹   mission   

本地环境安装路由插件 vue-router:

技术图片

 

 

 

配置
两种配置方法:在 main.js 中 || 在 src/router 文件夹下的 index.js 中

在 src/router/index.js 中的
1. 引入
import Vue from ‘vue‘
import Router from ‘vue-router‘
Router 是自定义的名字,这里叫这个名字后,下边都要用到的
2. 使用 / 注册
Vue.use(Router)
3. 配置
首先在定义路由的时候就需要多添加一个自定义字段 isLogin:true ,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由,
否则就进入登录页面。

技术图片

 

4. 引入路由相对应的地址

技术图片

 

 5 在 src/router 中创建 permission.js 文件
引入:

技术图片

 

在路由跳转之前 我们主要是利用 vue-router 提供的钩子函数 beforeEach () 对路由进行判断。

 技术图片

 

 

to 表示将要跳转到的组件 (目标组件)
console.log (from); //(源组件)
next();
next 是一个函数
next () 进入下一个组件的钩子函数
next (false) 阻止跳转 中断导航
next ("/login") 进入指定的组件的钩子函数
此文章转自与网络:
作者:晓丶生
链接:https://www.jianshu.com/p/22c54f0830c9

 
希望大家能支持我,我是涵酱 下次再见!
技术图片

 

 


 

 

 
 

vue 路由守卫

标签:字段   www   ons   用户   添加   nbsp   next   文件夹   mission   

原文地址:https://www.cnblogs.com/hansomeone/p/12093147.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!