router.js(全局守卫) import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import child from '../components/child.vue' import child1 from '../components/child1.vue' Vue.use(VueRouter) const routes = [ // { // path: '/', // name: 'Home', // component: '../App.vue' // }, { path: '/about', name: 'About', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') }, { path: '/child/:data', name: 'child', component: child // component: '../components/child.vue' }, { path: '/child1', component: child1 // component: '../components/child.vue' } ] const router = new VueRouter({ //mode: 'history', //base: process.env.BASE_URL, routes }) router.beforeEach((to,from,next) => { console.log('全局守卫'); // 以下可以做一些路由判断 next(); //不写这一句会无法跳转 }); export default router 局部守卫(child.vue) <template> <div> 我是子组件 <slot></slot> </div> </template> <script> export default { //局部守卫写法start beforeRouteEnter(to,from,next) { console.log('局部路由守卫main'); next(); }, //局部守卫写法end mounted() { console.log(this.$route) } } </script>