路由及路由守卫

目录

一、创建路由

二、嵌套路由

三、路由守卫实现登录判断

---

一、创建路由

创建路由的方式非常简单，直接在 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')
  }
})