Vue-router路由传参（query与params）

路由传参

Vue-router路由传参主要有两种：

1、查询参数

使用对象{name:'path', query:{id:'213', data:'我是参数数据'}}

2、路由参数

使用对象{name:'path', params:{foo:'bar'}}，使用路由传参，需要在router路由配置的时候path属性内加入":参数名",如：

{path:'/register/:foo', name:'register', component:Register},其中的foo就是参数名。

3、如果使用查询传参，当同一个页面存在同一个路径跳转，但是参数不同时，如果使用<router-view></router-view>标签，进行跳转时，数据可能不刷新，因为<router-view></router-view>标签监听的是锚点（即路径不变，就认为没有变化，所以数据不刷新），此时需要将<router-view></router-view>修改成

<router-view :key="$route.fullPath"></router-view>

复制代码
<!DOCTYPE html>
<html>
    <head>
        <title>路由传参</title>
    </head>
    <body>
        <div id="app">
            <router-link :to="{name:'login', query:{id:'123'}}">登录</router-link>
            |
            <router-link :to="{name:'register', params:{foo:'bar'}}">注册</router-link>
            <button type="button"  @click="goLogin">去登录</button>
            <router-view :key="$route.fullPath"></router-view>
        </div>
        <script src="vue.js"></script>
        <script src="vue-router.js"></script>
        <script>
            var Login = {
                template:`<div>我是登录页面:{{id}}</div>`,
                data(){
                    return {
                        id: '',
                    }
                },
                created:function(){
                    this.id = this.$route.query.id;
                }
            };
            var Register = {
                template:`<div>我是注册页面, {{ foo }}</div>`,
                data(){
                    return {
                        foo:'',
                    }
                },
                created:function(){
                    this.foo = this.$route.params.foo;
                }
            };
            Vue.use('VueRouter');
            const router = new VueRouter({
                routes:[
                    {path:'/login', name:'login', component:Login},
                    {path:'/register/:foo', name:'register', component:Register},
                ]
            });
            new Vue({
                el:"#app",
                router,
                methods:{
                    goLogin(){
                        this.$router.push({name:'login', query:{id:'456'}})
                    }
                }
            })
</script>
    </body>
</html>
复制代码

 4、query与params的区别

query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.route.query.id和this. route.query.id和this.route.query.id和this.route.params.id。

query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，query在浏览器地址栏中显示参数，params则不显示。

posted @   午亭爱成长  阅读(2842)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示
AI IDE Trae