console
const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>'}
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home, },
{ path: '/foo', component: Foo, meta: { auth: true}},
{ path: '/bar', component: Bar, meta: { auth: true }}
]
})
router.beforeEach((to, from, next)=>{
if(to.matched.some(m=>m.meta.auth)){
if(window.confirm('是否要导航到'+to.path)){
next()
}else{
next(false)
}
}
})
new Vue({
router
}).$mount('#app')
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.6/vue-router.js"></script>
<div id="app">
<h1>路由元信息meta</h1>
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/foo">/foo</router-link></li>
<li><router-link to="/bar">/bar</router-link></li>
</ul>
<router-view class="view"></router-view>
</div>