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属性可以自定义属性,如果网站标题,一些自定义的数据
{
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)=>{
//校验完毕 要做的事情 比较少用
})
组价路由器守卫,没有前置 和 后置 这个概念
路由配置
{
name: 'user',
path: '/user',
component: User,
meta: { title: '个人中心' },
}
User组件
<script>
export default {
name: 'User',
//通过路由规则进入组件时被调用
beforeEnter: (to, from, next) => {
// ...
},
//通过路由规则离开组件时被调用 路由被切换走之前
beforeRouteLeave(to, from, next) {
// ...
}
}
</script>