vue-router

关于路由的参考：vue-router总结 https://www.tuicool.com/articles/J3ArAri
https://github.com/superman66/vue-axios-github

Vue多页路由与模板解析：http://blog.poetries.top/2019/06/01/vue-router-and-template-analyse/

路由的基本用法

router/index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'

import Index from './index.vue'
import Repository from './repository.vue'
import Login from './login.vue'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: '/',
        component: Index
        //component: resolve => require(['Index路径.vue'],resolve)  按需加载 
    },
    {
        path: '/repository',
        name: 'repository',
        meta: {                           //有这个属性的，表示需要登陆
            requireAuth: true,
        },
        component: Repository
        //component: resolve => require(['Repository路径.vue'],resolve)  按需加载
    },
    {
        path: '/login',
        name: 'login',
        component: Login
        //component: resolve => require(['Login路径.vue'],resolve)  按需加载
    }
];

const router = new VueRouter({
    routes
});

router.beforeEach((to, from, next) => {
    if (to.matched.some(r => r.meta.requireAuth)) {            //判断该路由是否需要登录权限
        if (store.state.token) {                               // 通过vuex state获取当前的token是否存在
            next();
        }
        else {
            next({
                path: '/login',
                query: {redirect: to.fullPath}                // 将跳转的路由path作为参数，登录成功后跳转到该路由。     fullPath匹配路由，path匹配路径，2者不同
            })
        }
    }
    else {
        next();
    }
})

export default router;

main.js文件

import Vue from 'vue'
import router from './router'

new Vue({
    el: '#app',
    router,                      //注入router
    render: h => h(App)
}).$mount('#app');