目录
一、创建路由
创建路由的方式非常简单,直接在 router/index 文件中创建即可
const router = new VueRouter({
routes: [{
path: '/Login',
name:'Login',
component: Login,
}]
})
二、嵌套路由
嵌套路由可以理解为在一个路由中放置路由出口 <view-router/>,不需要跳转页面即可在该路由出口渲染指定路由页面的内容
const router = new VueRouter({
routes: [{
path: '/',
name: 'Home',
component: Home,
children: [
{
path: '/userControl',
name: 'userControl',
component: userControl,
},
{
path: '/blogControl',
name: 'blogControl',
component: blogControl,
},
],
}]
})
上面这段代码中,可以看到 /userControl 和 /blogControl 是作为 /Home 的 “children路由”,我个人通俗一点理解为:在爸爸内部渲染儿子,渲染的出口为页面上的 <view-router/>
三、路由守卫实现登录判断
使用路由守卫判断登录,只需要在登录后生成一条sessionStorage数据,然后判断是否有这条数据,分配指定的路由,即可做到登录判断
//判断登录
doLogin() {
if (this.userName === this.trueUserName && this.password === this.truePassword) {
//登录成功,创建一条全局的 sessionSotrage
sessionStorage.setItem("token", "111")
this.$router.push('/')
} else {
alert("账号或密码错误")
}
},
router.beforeEach((to, from, next) => {
//将登录时生成的sessionStorage的key值对应的value 存在token中
const token = sessionStorage.getItem('token');
//判断token是否存
if (token || to.path === '/Login') {
next();
} else {
//没有token 则还是返回登录页面
next('/Login')
}
})