vue 全局路由守卫
程序员文章站
2022-03-24 18:22:04
...
# 全局路由守卫有两种方式
# 第一种是直接在 src => router => index.js
里面修改
原文件
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
]
})
修改后
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router);
const router = new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
});
router.beforeEach((to, from, next) => {
next();
});
export default router;
# 第二种是在 src => main.js
里面修改
原文件
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
修改后
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* 全局路由守卫 */
router.beforeEach((to, from, next) => {
next();
});
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})