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

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

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

学习之前，先了解一下

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

query传参数

• 第一种：字符串形式，采用的是name=value&name=value
• 第二种：字符串拼接形式，采用的是name=${value}&name=${value}
• 第三种：对象形式（常用），采用的是query对象传参

// A.vue
<template>
    <div>
        <h2>A</h2>
        <div>
            <ul>
                <!-- 第一种：采用query方式传参，使用字符串方式 -->
                <li><router-link to="/a/c?a1=111&a2=222&a3=333">A1 Router-Link</router-link></li>
                
                <!-- 第二种：采用query方式传参，使用字符串拼接方式 -->
                <li><router-link :to="`/a/c?a1=${a[0]}&a2=${a[1]}&a3=${a[2]}`">A2 Router-Link</router-link></li>
                
                <!-- 第三种：采用query方式传参，使用对象形式（常用） -->
                <li>
                    <router-link :to="{
                        path : '/a/c',
                        query : {
                            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.query.a1}}</li>
            <li>{{$route.query.a2}}</li>
            <li>{{$route.query.a3}}</li>
            
            <!-- 第二种：循环，换了一种形式，但原理不变 -->
            <li v-for="aName, pName in $route.query" :key="pName">
                {{aName}}
            </li>
        </ul>
    </div>
</template>

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

• {{$route.query.a1}}的调用原理：
  • $route指向的是index.js文件的路由
  • query指向的是在vue文件中to=""中包含的值
  • a1指向的是value的name
  • 通过$route获取到index.js对应的path路径（因为C.vue是A.vue的子路由，所以会找到path:‘/a/c’），再通过路径名找到A.vue的query（也就是三种形式的value），最后根据对应的name找到要输出的value

// 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 : [
                // 可以有多个子路由
                {
                    // 在子路由中，path不用加“/”不要添加，系统会自己加上去的
                    path : 'c',
                    component : C,
                }, // 可以往下添加子路由
            ]
        },
        {
            path : '/b',
            component : B
        }
    ]
})

给路由命名（name）

• 功能：给path路径命名。
• 注意：name只适合对象形式，并且在使用name时对象形式的path就可以不用

// index.js 在子路由中加入name
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 : [
                {
                    // 给路由命名，用这种方式，只能用:to="{}"
                    name : 'ac',
                    path : 'c',
                    component : C,
                }
            ]
        },
        {
            path : '/b',
            component : B
        }
    ]
})

// A.vue
<template>
    <div>
        <h2>A</h2>
        <div>
            <ul>
                <!-- 第三种：采用query方式传参，使用对象形式（常用） -->
                <li>
                    <router-link :to="{
                        name : 'ac',
                        // 有name可以不用path
                        // path : '/a/c',
                        query : {
                            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>

• 总结：query传参数对于index.js文件的改动并不大（如果不用name），更多的是在调用和设定参数时有所变动

query传参数与props配置的搭配

• props的功能：简写接收方式，让插值语法更简洁，也就是简写{{$route.query.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',
                    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',
                    component : C,
                    // 函数式，这里的$route可以随便写，没有讲究
                    props($route){
                        return {
                            a1 : $route.query.a1,
                            a2 : $route.query.a2,
                            a3 : $route.query.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>