十八、Vue-routes的基本使用((菜单栏、路由传参、路由跳转多页面开、路由引入区别)
菜单栏
一、Vue-routes的二级路由的配置
二、路由携带辨识变量(例如:导航栏在那个页面显示的控制)
三、vue-routes的跳转显示
四、路由重定向
路由传参
query传参(地址栏可见)
编程式
this.$router.push({ path: "/Details", query: { id: value, path: "/index", },
//取值
this.$route.query.id
声明式
this.$router.push(`/search/${this.keyword}?key=${this.keyword+1}`)
<router-link :to="{ path: '/about', query: { id: 123 } }"></router-link>
params传参(地址栏不可见)
编程式
this.$router.push({ name: "search", params: { keyword: "" || undefined, }, });
//取值
this.$route.params.keyword
声明式
//声明式导航使用 <router-link :to="{ name: 'user1', params: { id: 123 } }">跳转</router-link>
路由跳转(多页面开发)
// 跳转播放介绍页面(实现多页面开发) playIntroductionPage() { this.routeUrl = this.$router.resolve({ path: "/playIntroductionPage", }); window.open(this.routeUrl.href, "_blank"); },
路由引入区别
优化引入this.$route.path拿不到路由名称
正常引入this.$route.path可以拿到路由名称