vue -router 总结( 02 )

vue -router 打开新页面

方法01 this.$router.resolve

//打开新页面
let routeUrl = this.$router.resolve({
    name: 'HelloWorld',
    query: {username: "dafei_name"}
});
window.open(routeUrl.href, '_blank')

// 接受参数
{{this.$route.query.username}}

方法02 router-link

<router-link :to="{ path: '/404',query: {username:'我是大飞'} }">404</router-link>

全局导航守卫beforeEach处理元数据meta

// src/router/index.js 文件中

// 全局导航守卫
router.beforeEach((to, from, next) => {
    document.title = to.meta.title;
    next();
});

// 在组件中获取meta数据信息
<div> {{ $route.meta.title}} </div>

组件内导航守卫

// beforeRouteEnter
// beforeRouteUpdate 
// beforeRouteLeave

beforeRouteLeave(to, from, next) {
    console.log(to,"去那个页面");
    console.log(from,"来自哪个页面");
    next();  //这个不要丢了
}