动态路由传参，组件 接收 传递过来的数据 的多种实现方式（$route.params 、props 、props设置为对象）

于 2023-06-05 12:24:43 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： vue.js 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72303943/article/details/131045623
版权

1、通过$route.params来获取路径参数

 

<h2>接收到 你传递过来的值：{{$route.params.username}} --- {{$route.params.post_id}}</h2>

mounted(){
                // 从路由信息对象$route 中读取数据 -- 在脚本里写时 要带this
                console.log(this.$route.params);
                this.pid = this.$route.params.post_id;
                this.uname = this.$route.params.username;
            }

2、通过props来接收参数

注意：props在路由配置规则中 props:true 使用方法，如下所示：

 <div id="app">
        <!-- 访问组件 -->
        <router-link to="/login">登录</router-link>
        <!-- <router-link to="/user/520">用户中心</router-link> -->
        <router-link to="/user/小李子是蠢猪/520">用户中心</router-link>

        <router-view></router-view>

    </div>

    <template id="login">
        <div>
            <h1>我是login组件</h1>
        </div>
    </template>

    <template id="user">
        <div>
            <h1>我是user组件</h1>

            <h2>获取到的编号:{{id}}</h2>
            <h2>获取到的用户名是:{{username}}</h2>
        </div>
    </template>





    <script src="./js/vue.js"></script>
    <script src="./js/vue-router .js"></script>

    <script>
        // 组件
        var login = {
            template:'#login'
        };

        var user = {
            template:'#user',
            props:['id','username'],
            data(){
                return {
                    // uid:'',
                    // uname:''
                }
            },
            mounted(){
                // 从路由信息对象$route 中读取数据 -- 在脚本里写时 要带this
               console.log(this.$route);
            }
        }

        // 创建路由实例对象
        var myRouter = new VueRouter({
            mode:'history', //模式
            // 配置路由规则
            routes:[
                {
                    path:'/login',
                    component:login
                },
                {
                    // vue-router中 动态路由如何设置？
                    // 动态传参 语法：
                    // 通过 /:参数名  的形式传递参数
                    path:'/user/:username/:id',
                    component:user,
                    // 在路由配置中 添加props属性 给其设置true
                    props:true
                }
            ]
        })


        // 根组件
        var a = new Vue({
            // 模板选择器
            el:'#app',

            // 挂载路由
            router:myRouter,

            // 数据中心
            data(){
                return {

                }
            },
            // 方法中心
            methods:{

            }
        })
    </script>

预览效果：

 

3、我们可以将props设置为对象，那么就直接将对象的数据传递给组件进行使用

注意：props在路由配置规则中 props:(route)=>({}) 使用方法，如下所示：

<title>props另外一种用法</title>
</head>
<body>
    <div id="app">
        <!-- 访问组件 -->
        <router-link to="/login">登录</router-link>
        <router-link to="/user">用户中心</router-link>

        <router-view></router-view>

    </div>

    <template id="login">
        <div>
            <h1>我是login组件</h1>
        </div>
    </template>

    <template id="user">
        <div>
            <h1>我是user组件</h1>

            <h2>获取到的昵称: {{nickname}}</h2>
            <h2>获取到的用户年龄是: {{age}}</h2>
        </div>
    </template>





    <script src="./js/vue.js"></script>
    <script src="./js/vue-router .js"></script>

    <script>
        // 组件
        var login = {
            template:'#login'
        };

        var user = {
            template:'#user',
            props:['nickname','age'],
            data(){
                return {
                    // uid:'',
                    // uname:''
                }
            },
            mounted(){
                // 从路由信息对象$route 中读取数据 -- 在脚本里写时 要带this
                // 如果你在路由配置中，直接把参数写在props的箭头函数里 
                // 这些参数 不会 被存到 路由信息对象$route的 pramas 这个对象中， 此时这个对象是空
               console.log(this.$route);
            }
        }

        // 创建路由实例对象
        var myRouter = new VueRouter({
            mode:'history', //模式
            // 配置路由规则
            routes:[
                {
                    path:'/login',
                    component:login
                },
                {
                    // vue-router中 动态路由如何设置？
                    // 动态传参
                    // 此刻的 动态传参 是写在 props里的 则path里则不用写了
                    path:'/user',
                    component:user,
                    // 在路由配置中 添加props属性 给其设置true
                    // props 设置为箭头函数 在箭头函数里 写一个对象 在当前对象里 写 若干个属性
                    props:(route)=>({
                        nickname:'小李子憨憨',
                        age:66
                    })
                }
            ]
        })


        // 根组件
        var a = new Vue({
            // 模板选择器
            el:'#app',

            // 挂载路由
            router:myRouter,

            // 数据中心
            data(){
                return {

                }
            },
            // 方法中心
            methods:{

            }
        })
    </script>

 

预览效果：

4、如果想要获取传递的参数值 还想要 获取传递的对象数据，那么props应该设置为函数形式

<div id="app">
        <!-- 访问组件 -->
        <router-link to="/login">登录</router-link>
        <router-link to="/user/555">用户中心</router-link>

        <router-view></router-view>

    </div>

    <template id="login">
        <div>
            <h1>我是login组件</h1>
        </div>
    </template>

    <template id="user">
        <div>
            <h1>我是user组件</h1>

            <h2>获取到的昵称: {{nickname}}</h2>
            <h2>获取到的用户年龄是: {{age}}</h2>
            <h2>获取到的编号是: {{uid}}</h2>
        </div>
    </template>





    <script src="./js/vue.js"></script>
    <script src="./js/vue-router .js"></script>

    <script>
        // 组件
        var login = {
            template:'#login'
        };

        var user = {
            template:'#user',
            props:['nickname','age','uid'], // 这里的参数 要与下面的 props对象里的一致
            data(){
                return {
                    // uid:'',
                    // uname:''
                }
            },
            mounted(){
                // 从路由信息对象$route 中读取数据 -- 在脚本里写时 要带this
                // 如果你在路由配置中，直接把参数写在props的箭头函数里 
                // 这些参数 不会 被存到 路由信息对象$route的 pramas 这个对象中， 此时这个对象是空
               console.log(this.$route);
            }
        }

        // 创建路由实例对象
        var myRouter = new VueRouter({
            mode:'history', //模式
            // 配置路由规则
            routes:[
                {
                    path:'/login',
                    component:login
                },
                {
                    // vue-router中 动态路由如何设置？
                    // 动态传参
                    // 此刻的 动态传参 是写在 props里的 则path里则不用写了
                    // 同时 把参数 也写在 路径path上
                    path:'/user/:id',
                    component:user,
                    // 在路由配置中 添加props属性 给其设置true
                    // props 设置为箭头函数 在箭头函数里 写一个对象 在当前对象里 写 若干个属性
                    props:(route)=>({
                        nickname:'小李子憨憨',
                        age:66,
                        uid:route.params.id
                    })
                }
            ]
        })


        // 根组件
        var a = new Vue({
            // 模板选择器
            el:'#app',

            // 挂载路由
            router:myRouter,

            // 数据中心
            data(){
                return {

                }
            },
            // 方法中心
            methods:{

            }
        })
    </script>

 

预览效果：

卡夫卡的baby
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue动态路由配置及路由传参的方式
08-27
主要介绍了vue动态路由配置，vue路由传参的方式，文中给大家提到了router-link这个组件的相关知识,需要的朋友可以参考下
vue-router动态传参（$route.params、$route.query）
muzidigbig的博客
11-02 2687
一、动态路径参数 以冒号开头（这种传参的方式会将传的值暴露在地址栏中；$route.params进行接收） 当to后面跟的是其他拼凑出来的值需要让to变为属性的方式传参 即 :to =' ' 效果： 二、get的方式进行传参（这种传参的方式相当于在地址栏？参数=值；$route.query进行接收） 效果： ...
Vue动态路由、动态路由如何进行参数的传递、$router和$route的区别、命名路由、命名视图
m0_74343097的博客
01-12 3072
Vue动态路由、动态路由如何进行参数的传递、$router和$route的区别、命名路由、命名视图
Vue知识点: 路由的params参数
summer_cloudy的博客
03-14 1293
params参数
Vue路由传参（params 与 query）
H524268015wsw的博客
11-23 4787
问题一：name是什么呢？name 是配置路由时给 path 取的别名，方便使用。但要注意的是 “地址栏显示的路径始终是 path 的值”，如图定义路由 方式一：通过 params 传参页面一：声明式：router-link to 以对象形式跳转 页面二：接收用 this.$route.params.+传过来的“name” 在控制台可以看见传参是否成功：通过 params 传参有一个缺点，就是刷新页面就获取不到参数了。 方式二：通过 query 传参页面一：声明式：router-link to 以
vue中this.$route.query和this.$route.params & query传参和params传参的使用和区别
热门推荐
weixin_44867717的博客
11-18 3万+
vue中this.route.query和this.route.query和this.route.query和this.route.params & query传参和params传参的使用和区别 1.query传参： 路由： var router = new VueRouter({ routes: [ { path: '/login', component: login }, { name:'register',path: '/register'
vue - vue中使用this.$route.params获取不到参数的原因
qq_43886365的博客
11-17 9714
如果想要this.$route.params 获取到this.$route.push()传的参数，一定要使用name属性来指定路由 不要用path属性；
路由，vue-router的基本用法，vue-router的常见用法$route.params、$router.push、$router.replace、$router.go
m0_47794838的博客
02-01 3162
路由，vue-router的基本用法，vue-router的常见用法$route.params、$router.push、$router.replace、$router.go
vue中动态路由传递参数
LLL3189860667的博客
09-07 4474
使用this.$route.query获取传递过来的数据。使用this.$route.变量名获取传递过来的数据。
vue路由传参（六种方式）
VXYupq的博客
04-04 4814
布尔模式传参，在路由配置文件中的路径配置中，如果你使用了动态路由，那么他不仅仅可以往params里面传递参数对象过去，他也会往props里面传递过去，注意参数接取需要在你所要跳转的路径的组件中接取，如果使用动态路由传递参数想要使用props，需要设置props为true。props:[,'name','age','sex'],在组件模板中接收。name:'老王',props:[,'name','age','sex'],在组件模板中接收。props:['id','name'],在组件模板中接收。
10.（vue3.x+vite）组件间通信方式之props与$emit.rar
最新发布
09-19
前端技术社区总目录有各种各样的前端示例其地址为： https://blog.csdn.net/m0_60387551/article/details/128017725
Vue.js组件使用props传递数据的方法
10-16
主要为大家详细介绍了Vue.js组件使用props传递数据的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
详解vue2父组件传递props异步数据到子组件的问题
08-30
本篇文章主要介绍了vue2父组件传递props异步数据到子组件的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue.js组件props数据验证实现详解
10-16
主要为大家详细介绍了Vue.js组件props数据验证的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vuejs 组件——props数据传递的实例代码
10-20
本篇文章主要介绍了Vuejs 组件——props数据传递的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
路由动态传参
扮老虎的猪
08-05 2962
从列表页跳到编辑页时，经常需要传参。我比较常用的有下面两种： 一、刷新后失效 路由定义： { path: '/test', name: 'test', component: () => import('../views/Test.vue'), meta: {title:'', breadNumber: 1} } 路由跳转： this.$router.push({ name: 'test', params: { id...
动态路由传参
weixin_46452975的博客
07-12 265
//第一步------------在router里面注册一个组件，path路径直接传入参数 { path: '/articleDetial/:artid', component: articleDetial } //第二步------------点击跳转的时候直接传参 methods: { // 点击标题跳转到文章详情页面 getDetail (item) { this.$router.push(`/articleDetial/${item.art
动态传参
weixin_34067049的博客
12-10 646
1.动态传参(重点) *, ** *, ** : 形参: 聚合 位置参数* -> 元组 关键字** -> 字典 实参: 打散 列表, 字符串, 元素 -> * 字典 -> ** 形参顺...
vue-动态路由传参
俊人呀的博客
03-02 1644
在vue点击跳转时，需要带着当前页面的参数id一起跳转&lt;router-link :to="'/url/' + item.id"&gt;跳转到url中 带着当前的item.id例如下个页面的数据需要这个页面跳转时的id来判断显示哪条。&lt;!-- 字符串 --&gt; &lt;router-link to="home"&gt;Home&lt;/router-link&gt; &lt;!--
`${DOCUMENTPATH}\\${route.params.DOCUMENTNAME}` 这样没有获取到params里的参数
07-15
在 `${DOCUMENTPATH}\\${route.params.DOCUMENTNAME}` 中没有正确获取到 `route.params` 参数的值，可能是因为在模板字符串中使用了错误的语法或者参数名称不正确。 请确保以下几点： 1. 确保在路由配置中正确定义了 `DOCUMENTNAME` 参数。例如： ```javascript { path: '/documents/:DOCUMENTNAME', name: 'Document', component: DocumentComponent } ``` 2. 确保在路由跳转时正确传递了 `DOCUMENTNAME` 参数。例如： ```javascript router.push({ name: 'Document', params: { DOCUMENTNAME: 'example.doc' } }); ``` 3. 在使用模板字符串时，确保使用了正确的语法 `${route.params.DOCUMENTNAME}`。 下面是一个示例，展示了如何正确地在模板字符串中使用 `route.params` 参数： ```javascript const filePath = `${DOCUMENTPATH}\\${route.params.DOCUMENTNAME}`; ``` 请注意，变量名 `route` 必须对应于你的组件中的路由对象，可以通过 `this.$route` 或者 `props.route` 来访问。 如果问题仍然存在，请提供更多关于你的代码和路由配置的细节，这样我才能给出更具体的帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值