Vue路由組件通過props配置傳參的實(shí)現(xiàn)

更新時(shí)間：2022年06月08日 11:04:35 作者：敦厚的曹操

本文主要介紹了Vue路由組件通過props配置傳參的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、基于params參數(shù)傳遞

1、index.js（路由配置）

props:true

// 引入路由
// 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'
 
 
// 創(chuàng)建一個(gè)路由器
 
export default new VueRouter({
    routes: [
 
        {
            path: '/Box_1',
            component: Box_1,
            children: [
                {
                    name: 'myMenu',  // 用name代替路徑
                    path: 'Menu_1',
                    component: Menu_1,
                    props:true
                },
                {
                    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（父路由組件 - 發(fā)送參數(shù)）

<template>
  <div class="m_box">
    <div class="top">
      <!-- 路由跳轉(zhuǎn)鏈接 -->
      <router-link class="box_1" active-class="active"
        :to="{
          name:'myMenu',
          params:{
            id:id,
            name:name
          }
        }">
        菜單1
      </router-link>
      <!-- 路由跳轉(zhuǎn)鏈接 -->
      <router-link class="box_2" to="/Box_1/menu_2" active-class="active">
        菜單2
      </router-link>
    </div>
    <div class="bottom">
      <!-- 我是Box_1組件! -->
      <router-view></router-view>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "Box_1",
  data(){
    return {
      id:"666",
      name:"我是Box_1組件傳過來的參數(shù)"
    }
  }
};
</script>

3、Menu_1.vue（子路由組件 - 接收參數(shù)）

<template>
  <div class="m_box">
    <div class="top">
      <!-- 路由跳轉(zhuǎn)鏈接 -->
      <router-link class="box_1" active-class="active"
        :to="{
          name:'myMenu',
          params:{
            id:id,
            name:name
          }
        }">
        菜單1
      </router-link>
      <!-- 路由跳轉(zhuǎn)鏈接 -->
      <router-link class="box_2" to="/Box_1/menu_2" active-class="active">
        菜單2
      </router-link>
    </div>
    <div class="bottom">
      <!-- 我是Box_1組件! -->
      <router-view></router-view>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "Box_1",
  data(){
    return {
      id:"666",
      name:"我是Box_1組件傳過來的參數(shù)"
    }
  }
};
</script>

二、基于Query和params參數(shù)傳遞（通用）

1、index.js（路由配置）

（1）query參數(shù)

id:$route.query.id,
name:$route.query.name,

（2）params參數(shù)

id:$route.params.id,
name:$route.params.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'
 
 
// 創(chuàng)建一個(gè)路由器
 
export default new VueRouter({
    routes: [
 
        {
            path: '/Box_1',
            component: Box_1,
            children: [
                {
                    name: 'myMenu',  // 用name代替路徑
                    path: 'Menu_1',
                    component: Menu_1,
                    props($route){
                        return{
                            id:$route.params.id,
                            name:$route.params.name,
                        }
                    }
                },
                {
                    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（父路由組件 - 發(fā)送參數(shù)）

注意：params：，如果是想query方式，就改成query

<template>
  <div class="m_box">
    <div class="top">
      <!-- 路由跳轉(zhuǎn)鏈接 -->
      <router-link class="box_1" active-class="active"
        :to="{
          name:'myMenu',
          params:{
            id:id,
            name:name
          }
        }">
        菜單1
      </router-link>
      <!-- 路由跳轉(zhuǎn)鏈接 -->
      <router-link class="box_2" to="/Box_1/menu_2" active-class="active">
        菜單2
      </router-link>
    </div>
    <div class="bottom">
      <!-- 我是Box_1組件! -->
      <router-view></router-view>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "Box_1",
  data(){
    return {
      id:"666",
      name:"我是Box_1組件傳過來的參數(shù)"
    }
  }
};
</script>

3、Menu_1.vue（子路由組件 - 接收參數(shù)）

<template>
  <div class="m_box">{{id}}.{{name}}</div>
</template>
 
<script>
export default {
  name: "Menu_1",
  props:['id','name'],
  mounted() {
    console.log("=============");
    console.log(this);
  },
};
 
</script>

到此這篇關(guān)于Vue路由組件通過props配置傳參的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue props傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: