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: '/about',
name: 'About',
component: () => import( '../views/About.vue')
},
{
path: '/child/:data',
name: 'child',
component: child
},
{
path: '/child1',
component: child1
}
]
const router = new VueRouter({
routes
})
router.beforeEach((to,from,next) => {
console.log('全局守衛');
next();
});
export default router
局部守衛(child.vue)
<template>
<div>
我是子組件
<slot></slot>
</div>
</template>
<script>
export default {
beforeRouteEnter(to,from,next) {
console.log('局部路由守衛main');
next();
},
mounted() {
console.log(this.$route)
}
}
</script>