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

最新推荐文章于 2024-06-18 11:23:38 发布
最新推荐文章于 2024-06-18 11:23:38 发布
阅读量501 收藏
点赞数 5
分类专栏： Vue 文章标签： vue.js 前端 javascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47957908/article/details/134149691
版权

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>
南瓜骨头
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue路由跳转传参数的方法
10-17
Vue Router是官方提供的路由库，提供了丰富的功能，包括动态路由匹配、命名路由、以及本文重点讨论的——路由跳转时传递参数。以下是对Vue Router中跳转传参数的详细说明： ### 1. 使用`router-link`进行跳转 `...
Vue传参一箩筐(页面、组件)
10-17
- 在组件A (`componentsA.vue`) 中，我们可以使用`this.$router.push()`方法，将参数值拼接到路径中，例如`path:`componentsB/${this.person.name}/${this.person.age}/${this.person.sex}`。 - 当组件B (`...
vue-router路由跳转，name、params、path、query
pig_ning的博客
06-02 2517
【代码】vue-router路由跳转，name、params、path、query。
Web前端 ---- 【Vue】Vue路由传参（query和params）
weixin_68854196的博客
12-13 2643
路由的使用以及query传参和params传参
vue-router命名路由
木雷双雄7
10-19 4472
/Home是在Router的全局配置中配置的path值。 这种显示的引用路径定义的URL一旦变更，所有引用的地方都需要改，其工作量可想而知。 但是vue-router提供了一种隐式的引用路径，即命名路由，通过路由的名称取代URL的直接引用。 因此需要给Router的全局配置进行重构： router/index.js import Vue from 'vue' import Router
Vue Router query 命名路由 params props
qq_49184510的博客
06-22 155
1. 传递参数 2.接收参数 src/router.index.js src/pages/Message.vue src/pages/Detail.vue 2. 命名路由 1. 作用：可以简化路由的跳转2. 如何使用 a. 给路由命名 b. 简化跳转 src/router/index.js src/pages/Message.vue 3. 路由的 params
vue中的路由跳转方法，详细（vue路由跳转）
weixin_65793170的博客
12-08 6977
补充：获取参数的时候是$route（$route是用来获取路由信息的），而不是$router（$ router是用来操作路由的），然后以上都可以写成行内跳转方式，例如@click="$router.back(-1)" 。
Vue中路由的query参数+命名路由+路由中的params参数+路由中的props配置+router-link的replace属性+全局前置路由守卫的使用，尚硅谷Vue系列教程学习笔记（13）
weixin_43749999的博客
09-02 661
尚硅谷Vue系列教程学习笔记（13），本文主要包含如下内容： 121-路由的query参数 122-命名路由 123-路由中的params参数 124-路由的props配置 125-router-link的replace属性 126-编程式路由导航 127-缓存路由组件 128-两个新的生命周期钩子 129-全局前置-路由守卫 130-全局后置-路由守卫
vue router name命名规范_vue-router使用
weixin_39737368的博客
11-20 1165
vue-router基本用法vue-router的实现原理：路由不同的页面也就是加载不同的组件。路由的三个基本概念：router：它是一条路由，test按钮 => test内容，这是一条route，test1按钮 => test1内容，这是另一条路由。routers：它是一组路由，把上面的每一条路由组合起来，形成一个数组。[{test按钮 => test内容}, {test1按钮...
vue的传参方式汇总和router使用技巧
08-27
1. `$route.path`：当前路由的路径，总是解析为绝对路径。 2. `$route.params`：一个 key/value 对象，包含了动态片段和全匹配片段。 3. `$route.query`：一个 key/value 对象，表示 URL 查询参数。 4. `$route.hash...
vue2+vue3笔记
07-14
Vue 是什么特点：声明式Vue->resource-> awesome vue 和 cookbook 重点关注下面代码，第一个正常输出尚硅谷，第二个原格式输出{{name}}。 十九、MVVM 模型 理解 MVVM原理：把数据丢到框架中该放的位置，框架帮做一...
前端面试题（vue、JavaScript、es6）
06-28
答：包括项目使用 keep-alive 时可搭配组件 name 进行缓存过滤、DOM 做递归组件时需要调用自身 name、vue-devtools 调试工具里显示的组件名称是由 vue 中组件 name 决定的。 13. v-if 和 v-for 一起使用时，谁的...
vue-router中$route与$router,path与name,params与query的区别梳理
积极！
01-08 2147
vue-router中route与route与route与router,path与name,params与query的区别梳理
vue-router 传参：query传参、params传参
热门推荐
weixin_49832841的博客
04-17 1万+
简单介绍了 query传参和 params传参这两种方式
vue路由传参和取参,四种方法,包会
蔡蔡
08-09 372
路由传参两种形式 1、name可以和params、query都可以一起使用； 2、path只能和query使用； 3、使用params传参 刷新后不会保存，使用query刷新后可以保存； 4、params不会在地址栏显示，query会在地址栏显示； 5、params能和动态路由一起使用，而query不能 ...
jquery根据name属性查找
weixin_33805557的博客
10-18 954
$("div[id]") 选择所有含有id属性的div元素 $("input[name='keleyicom']") 选择所有的name属性等于'keleyicom'的input元素 $("input[name!='keleyicom']") 选择所有的name属性不等于'keleyicom'的input元素 $("input[name^='keleyi']") 选择所有的name属性以'kele...
vue-router的routes中name属性作用详解
m0_60237095的博客
08-16 6722
我们常用vue.js和vue-router来创建单页应用，vue-router能很方便的管理所有的单页组件。我们在定义每个路由的时候会有一个name的属性（如下面代码），通常我们不定义这个属性发现也没有任何问题，那么这个name到底有什么用呢？ export default new Router({ mode: 'history', routes: [ { path: '/', name: 'Hello', component: Hello ...
Vue路由传参(query)
weixin_45830334的博客
03-30 1万+
从遍历出的列表里跳转对应的详情 template中 <div v-for="(item,index) in list" :key="index"> <p>{{ item.pigId }}</p> <p>{{ item.pigName }}</p> </div> script中 data() { return { list: [] } }, 通过接口获取列表先: //
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
最新发布
浩星
06-18 391
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
vue3路由query传参刷新丢失
07-14
在路由配置中，可以使用props属性将query参数映射到组件的props中。 params是通过URL中的路径参数传递参数，例如：/user/123。在路由配置中，需要使用动态路由配置来定义路径参数，例如：/user/:id。在组件中可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值