Vue杂谈 Vue Router篇

Vue Router（Vue Router）

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。路由是指路由器从一个接口上收到数据包，根据数据包的目的地址进行定向并转发到另一个接口的过程。也就是一个简易导航。

Router文件夹的配置：

静态路由：

用于一般界面的显示，并不用读取用户的用户名及其相应的登入信息

const constantRouterMap = [{
        path: '/login',
        meta: {
            title: '用户登录'
        },
        component: (resolve) => require(['../views/login.vue'], resolve)
    },
    {
        path: '/register',
        meta: {
            title: '用户注册'
        },
        component: (resolve) => require(['../views/register.vue'], resolve)
    },]

动态路由：

将给定匹配模式的路由映射到同一个组件

权限路由：

用于特殊界面的显示，需要读取用户身份以读取相应的路由

const asyncRouterMap = [{
        path: '/newCollection',
        meta: {
            title: '新建收藏夹',
            permission: ["user", "admin"]
        },
        component: (resolve) => require(['../views/newCollection.vue'], resolve)
    },
    {
        path: '/mine',
        meta: {
            title: '我的',
            permission: ["user", "admin"]
        },
        component: (resolve) => require(['../views/mine/mine.vue'], resolve)
    },]

导航守卫（以简易的token拦截进行说明）：

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。

每个守卫方法接收两个参数，以及一个可选的参数next：

• to: 即将要进入的目标 用一种标准化的方式

• from: 当前导航正要离开的路由 用一种标准化的方式

• next：确保 next 在任何给定的导航守卫中都被严格调用一次。

const router = NewRouter();

//路由转发拦截器
router.beforeEach((to, from, next) => {

    if (sessionStorage.getItem("role") == null && localStorage.getItem("token") != null) {
        getUserInfo(() => {
            customNext(to, next);
        });
    } else {
        customNext(to, next);
    }
    
});

function customNext(to, next) {
    next();
}

router.afterEach((to, from) => {
    if (to.matched[0] != null && to.matched[0].path === "*") {
        to.query["url"] = to.path;
    }
});


function NewRouter() {
    let router = new VueRouter(RouterConfig);
    if (sessionStorage.getItem("role")) {
        router.addRoutes(routerMatch(sessionStorage.getItem("role")));
    } else if (localStorage.getItem("token")) {
        getUserInfo();
    }
    return router;
}