参考文献 vue中文文档 : https://cn.vuejs.org/
本地环境安装路由插件vue-router：
cnpm install vue-router --save-dev
*没有安装淘宝镜像的可以将 cnpm 替换成 npm
安装淘宝镜像 :
npm install -g cnpm --registry=https://registry.npm.taobao.org
配置
两种配置方法：在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 ，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，
否则就进入登录页面。
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home,
meta:{
isLogin:true // 添加该字段，表示进入这个路由是需要登录的
}//路由元
},{
path:"/login",
name:"login",
component:Login
}
]
})
4.引入路由相对应的地址
import Home from "@/components/home"
import Login from "@/components/login"
5在src/router中创建permission.js文件
引入:
import router from "./index.js"
在路由跳转之前 我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。
// 路由守卫
router.beforeEach((to,from,next)=>{
if(to.matched.some(res=>res.meta.isLogin)){//判断是否需要登录
if (sessionStorage['username']) {
next();
}else{
next({
path:"/login",
query:{
redirect:to.fullPath
}
});
}
}else{
next()
}
});
export default router;
to 表示将要跳转到的组件 (目标组件)
console.log(from); //(源组件)
next();
next 是一个函数
next() 进入下一个组件的钩子函数
next(false) 阻止跳转 中断导航
next("/login") 进入指定的组件的钩子函数
