vue-router封装

Posted 92xcd

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-router封装相关的知识,希望对你有一定的参考价值。

用户是否需要登录

import Vue from ‘vue‘
import Router from ‘vue-router‘

Vue.use(Router)
const routes = [{
  path: ‘/‘,
  redirect: ‘/home‘
  },
  {
    path: ‘/home‘,
    name: ‘home‘,
    component: () =>import(‘./views/Home.vue‘),
    meta: {
      requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的
    },
    children: [{
      path: ‘/account_management‘,
      name: ‘account_management‘,
      component: () =>import(‘./views/admin/account_management.vue‘)
    }]

  },
  {
    path: ‘/login‘,
    name: ‘login‘,
    component: () =>
    import(‘./views/login/login.vue‘)
  }

]
const router = new Router({
  routes
})
//路由拦截器
router.beforeEach((to, from, next) => {
  //根据字段判断是否路由过滤
  if(to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if(localStorage.getItem(‘sid‘)) { //身份信息获取
      next();
    } else {
      next({
        path: ‘/login‘
      })
    }
  } else {
    next();
  }
});
export default router;













































以上是关于vue-router封装的主要内容,如果未能解决你的问题,请参考以下文章

项目集成 vue-router 和 vuex

在实现 Vue-Router 的 VueJS SPA 中实现嵌套的 $refs

vue + vue-router 实现动态切换代理(不同角色使用不同的请求地址)

Vue.js vue-router 随笔

Vue-Router

Vue-Router相关