十八、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可以拿到路由名称

 

 

 

 

 

 

posted on 2022-05-06 22:44  QiKS  阅读(665)  评论(0)    收藏  举报

导航