【Vue】路由组件传参(Query和Params)及路由命名name的用途（图文+代码）

一、静态传参数

  父路由组件链接

<!-- 路由跳转链接 -->
      <router-link class="box_1" to="/Box_1/menu_1?id=666&name=我是box_1组件传过来的参数" active-class="active">
        菜单1
      </router-link>

子路由组件引用

<template>
  <div class="m_box">{{$route.query.id}}.{{$route.query.name}}</div>
</template>

二、动态变量传参数（Query方式）

1、父路由组件链接（地址式写法）

<template>
  <div class="m_box">
    <div class="top">
      <!-- 路由跳转链接 -->
      <router-link class="box_1" :to="`/Box_1/menu_1?id=${this.id}&name=${this.name}`" active-class="active">
        菜单1
      </router-link>
  </div>
</template>

<script>
export default {
  name: "Box_1",
  data(){
    return {
      id:"666",
      name:"我是Box_1组件传过来的参数"
    }
  }
};
</script>

2、父路由组件链接（对象式写法）

<!-- 路由跳转链接 -->
      <router-link class="box_1"  active-class="active"
       :to="{
         path:'/Box_1/menu_1',
         query:{
           id:id,
           name:name
         }
       }">
        菜单1
      </router-link>

子路由组件引用

<template>
  <!-- <div class="m_box">我是Menu_1组件!</div> -->
  <div class="m_box">{{$route.query.id}}.{{$route.query.name}}</div>
</template>

三、路由命名的用法

在router/index.js中设置name

 在组件中引用，代替 path:'/Box_1/Menu_1',

四、动态变量传参数（Params方式）

Query方式，地址栏，带参数名

Params方式，地址栏中不带参数名

Params方式，地址栏中也可以隐藏参数

1、 router/index.js

如果想地址栏隐藏参数，直接把【path: 'Menu_1',】，不要加上后边的【/:id/:name】

// 引入路由
// eslint-disable-next-line no-unused-vars
import VueRouter from 'vue-router'
import Box_1 from '../pages/Box_1.vue'
import Box_2 from '../pages/Box_2.vue'
import Menu_1 from '../pages/Menu_1.vue'
import Menu_2 from '../pages/Menu_2.vue'


// 创建一个路由器

export default new VueRouter({
    routes: [

        {
            path: '/Box_1',
            component: Box_1,
            children: [
                {
                    name:'myMenu',  // 用name代替路径
                    path: 'Menu_1/:id/:name',
                    component: Menu_1
                },
                {
                    path: 'Menu_2',
                    component: Menu_2
                },

            ]
        },
        {
            path: '/Box_2',
            component: Box_2,
            children: [
                {
                    path: 'Menu_1',
                    component: Menu_1
                },
                {
                    path: 'Menu_2',
                    component: Menu_2
                },

            ]
        },
    ]


})

2、box_1.vue

<!-- 路由跳转链接 -->
      <router-link class="box_1" active-class="active"
        :to="{
          name:'myMenu',
          params:{
            id:id,
            name:name
          }
        }">
        菜单1
      </router-link>

3、Menu_1.vue

<template>
  <div class="m_box">{{$route.params.id}}.{{$route.params.name}}</div>
</template>