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>

你可能感兴趣的:(Vue,vue.js,前端,javascript,前端框架)