Vue路由及路由守卫

Posted 2021-02-06 xmforever

1. Vue路由的添加

vue cli3添加vue-router通过命令vue  add  router  

export default new Router({
    mode: ‘history‘,
    routes: [
        {
            path: ‘/‘,
            component: Main
        },
        {
            path: ‘/login‘,
            component: Login
        }
    ]
})

// app.vue
<div id="app">
    <router-view></router-view>
</div>

// main.vue
<div>
    <router-link to="/"></router-link>
    <router-link to="/login"></router-link>
</div>

 

2. 路由的重定向

export default new Router({
    mode: ‘history‘,
    routes: [
        {path: ‘/‘, redirect: ‘/main‘}
        // 当只有8080和8080/ 的时候，调到主页
    ]
})

3. 定义子路由

export default new Router({
    routes: [
        {
            path: ‘/‘,
            component: Main
        },
        {
            path: ‘/login‘,
            component: Login
        },
        {
            path: ‘/admin‘,
            component: Admin,
            children: [
                {path: ‘buttons‘, component: Buttons },  // 注意需要使用相对地址
                {path: ‘Tables‘, component Tables } 
            ]
        }
    ]
})

// 父级路由存在<router-view></router-view>

4.  路由守卫

• 全局beforeRouter
• 路由beforeEnter
• 组件beforeRouteEnter

const router = new Router({});

router.beforeEach((to, from, next) => {
  //to 前往的路由, from 来的路由, next 下一步钩子函数，没有问题，必须执行next()  
  console.log(to);
  if (to.path !== ‘/login‘) {
      if (window.isLogin) {
          next()
      } else {
          next(‘/login?redirect=‘+ to.path)
      }
  } else {
      next()
  }
})

export default router