import Vue from 'vue' import VueRouter from 'vue-router' //导入路由器 Vue.use(VueRouter) import Login from '../components/Login' import User from '../components/User' //导入需要路由的组件 const router = new VueRouter({ //暴露出去使用 routes: [ { path: '/login', component: Login }, { name: 'user', path: '/user', component: User, } ] }) //全部组件进入路由之前 router.beforeEach((to, from, next) => { next() //放行 这样写表示全部放行 //这里可以做判断，符合条件放行 }) export default router
to：到哪去
from：从哪里来
next：是否放行
用户登录规则
if(to.path=='/user')//判断路径是否为用户中心 { if(token....)//判断是否登录 { next() } }
路由器自定义属性meta
meta属性可以自定义属性，如果网站标题，一些自定义的数据
{ path: '/login', component: Login, meta: { title: '用户登录', isToken: true } }, //全部组件进入路由之前 router.beforeEach((to, from, next) => { document.title = to.meta.title next() })
路由的生命周期 前置 后置
//全部组件进入路由之前 router.beforeEach((to, from, next) => { next() //在这里一般做权限校验 }) //路由进入之后 router.afterEach((to,from)=>{ //校验完毕 要做的事情 比较少用 })
独享路由守卫
也就是一个路由限制，如果个人中心，其他页面随便看，只有个人中心要校验权限，这个就可以使用独享路由守卫
{ //独享前置路由守卫 name: 'user', path: '/user', component: User, meta: { title: '个人中心' }, beforeEnter: (to, from, next) => { document.title = to.meta.title next() } }
独享路由守卫没有 后置守卫 ，但可以配置成全局的后置路由守卫
//路由进入之后 router.afterEach((to,from)=>{ //校验完毕 要做的事情 比较少用 }) • 1
组件路由守卫
组价路由器守卫，没有前置 和 后置 这个概念
路由配置
{ name: 'user', path: '/user', component: User, meta: { title: '个人中心' }, }
User组件
<script> export default { name: 'User', //通过路由规则进入组件时被调用 beforeEnter: (to, from, next) => { // ... }, //通过路由规则离开组件时被调用 路由被切换走之前 beforeRouteLeave(to, from, next) { // ... } } </script>
