Vue的路由params与name（路径命名）、props配置的搭配

Vue的路由params与name（路径命名）、props配置的搭配

• 功能：通过params传参数，提高路由组件的复用性

学习之前，先了解一下

• 路由组件实例有两个属性：$route（会调用到index.js文件） 和 $router
  • $route：属于自己的路由对象。
  • $router：多组件共享的路由器对象。

params传参数与name（路径命名）

• 第一种：字符串形式，采用的是value/value/value
• 第二种：字符串拼接形式，采用的是/${value}/${value}
• 第三种：对象形式（常用），采用的是params对象传参
• name的功能：给path命名，简写path路径

// A.vue
<template>
    <div>
        <h2>A</h2>
        <div>
            <ul>
                <!-- 第一种：采用params方式传参，使用字符串方式 -->
                <li><router-link to="/a/c/111/222/333">A1 Router-Link</router-link></li>
                
                <!-- 第二种：采用params方式传参，使用字符串拼接方式 -->
                <li><router-link :to="`/a/c/${a[0]}/${a[1]}/${a[2]}`">A2 Router-Link</router-link></li>
                
                <!-- 第三种：采用params方式传参，使用对象形式（常用） -->
                <li>
                    <router-link :to="{
                        // 使用params传参，则不能使用path，只能用name
                        name : 'ac',
                        params : {
                            a1 : a[0],
                            a2 : a[1],
                            a3 : a[2],
                        }
                    }" >
                        A3 Router-Link
                    </router-link>
                </li>
            </ul>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name : 'A',
        data(){
            return{
                a : ['111', '222', '333']
            }
        }
    }
</script>

// C.vue 是A.vue的子路由
<template>
    <div>
        <h2>C</h2>
        <ul>
            <!-- 接收方式 -->
            <!-- 第一种 -->
            <li>{{$route.params.a1}}</li>
            <li>{{$route.params.a2}}</li>
            <li>{{$route.params.a3}}</li>
            
            <!-- 第二种：循环，换了一种形式，但原理不变 -->
            <li v-for="aName, pName in $route.params" :key="pName">
                {{aName}}
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name : 'C',
    }
</script>

// index.js 在子路由的path上有改动
// 引入路由
import VueRouter from 'vue-router'

// 引入路由组件
import A from '../pages/A'
import B from '../pages/B'

// 引入新的路由组件
import C from '../pages/C'


// 创建路由器
export default new VueRouter({
    // 可以配置多个路由
    routes : [
        {
            // 用于连接路由器的路径
            path : '/a',
            // 路由相关联的组件
            component : A,
            children : [
                // 可以有多个子路由
                {
                    // 给子路由命名
                    name : 'ac',
                    // 在子路由中，path不用加“/”不要添加，系统会自己加上去的
                    // 注意：这里的:a1/:a2/:a3对应的是A.vue的to=""中"c/"后面的值（只适用于第一和第二种方式，对象形式的可以不写），用:a1来接收值
                    path : 'c/:a1/:a2/:a3',
                    component : C,
                }, // 可以往下添加子路由
            ]
        },
        {
            path : '/b',
            component : B
        }
    ]
})

params传参数与props配置的搭配

• props的功能：简写接收方式，让插值语法更简洁，也就是简写{{$route.params.a1}}这一块部分

props配置的三种方式

• 第一种：静态写法，将key和value通过props传给组件

// index.js
import VueRouter from 'vue-router'

import A from '../pages/A'
import B from '../pages/B'
import C from '../pages/C'

export default new VueRouter({
    routes : [
        {
            path : '/a',
            component : A,
            children : [
                {
                    // 给子路由命名
                    name : 'ac',
                    path : 'c/:a1/:a2/:a3',
                    component : C,
                    // 静态写法，将key和value通过props传给组件
                    props : {
                        a1 : '111',
                        a2 : '222',
                        a3 : '333'
                    }
                }
            ]
        },
        {
            path : '/b',
            component : B
        }
    ]
})

// C.vue 是A.vue的子路由
<template>
    <div>
        <h2>C</h2>
        <ul>
            <!-- 接收方式 -->
            <li>{{a1}}</li>
            <li>{{a2}}</li>
            <li>{{a3}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name : 'C',
        // 这里要做props接收
        props : ['a1', 'a2', 'a3']
    }
</script>

• 第二种：函数式

// index.js
import VueRouter from 'vue-router'

import A from '../pages/A'
import B from '../pages/B'
import C from '../pages/C'

export default new VueRouter({
    routes : [
        {
            path : '/a',
            component : A,
            children : [
                {
                    name : 'ac',
                    path : 'c/:a1/:a2/:a3',
                    component : C,
                    // 函数式，这里的$route可以随便写，没有讲究
                    props($route){
                        return {
                            a1 : $route.params.a1,
                            a2 : $route.params.a2,
                            a3 : $route.params.a3
                        }
                    }
                }
            ]
        },
        {
            path : '/b',
            component : B
        }
    ]
})

// C.vue 是A.vue的子路由
<template>
    <div>
        <h2>C</h2>
        <ul>
            <!-- 接收方式 -->
            <li>{{a1}}</li>
            <li>{{a2}}</li>
            <li>{{a3}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name : 'C',
        // 这里要做props接收
        props : ['a1', 'a2', 'a3']
    }
</script>

• 第三种：直接转换，将params的数据转换成props（这种方式只支持params，query不能用）

// index.js
import VueRouter from 'vue-router'

import A from '../pages/A'
import B from '../pages/B'
import C from '../pages/C'

export default new VueRouter({
    routes : [
        {
            path : '/a',
            component : A,
            children : [
                {
                    name : 'ac',
                    path : 'c/:a1/:a2/:a3',
                    component : C,
                    // 直接转换，将params的数据转换成props
                    props : true
                }
            ]
        },
        {
            path : '/b',
            component : B
        }
    ]
})

// C.vue 是A.vue的子路由
<template>
    <div>
        <h2>C</h2>
        <ul>
            <!-- 接收方式 -->
            <li>{{a1}}</li>
            <li>{{a2}}</li>
            <li>{{a3}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name : 'C',
        // 这里要做props接收
        props : ['a1', 'a2', 'a3']
    }
</script>