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