vue学习 -- vue-router路由传参

朴灿烈づ我的快乐病毒、 2023-10-12 00:28 76阅读 0赞

## 前言 ##

之前，查了其他博客，总结一篇,发现，因此又查了一遍好不容易写了出来。

## 1.query传参 ##

一种是，这样滴。

// 跳转
    this.$router.query.push(name:'useredit',query:{id:scope.row.id});
    
    
    <router-link :to="{name:'useredit',query:{id:scope.row.id}}" >编辑</router-link>

跳转之后，路由路径是这样滴，添加了参数。

http://localhost:8080/useredit?id=8

在router中的index.js对应的路由路径，可以不用修改，用原路径就可以。

// 注册
        {
            path: "/register",
            name: "register",
            component: () => import("@/views/Login/RegiSter.vue")
        },

> ***this.$routr.query.id 拿到值***

### 2.parms传参 ###

// 跳转
    this.$router.push(path:path:'/useredit/'+scope.row.id);
    
    <router-link :to="{path:'/useredit/'+scope.row.id}" >编辑</router-link>

跳转之后，页面路径变为

http://localhost:8080/useredit/8

在routet 的index.js文件需要更改路由路径。

{
            path:"/useredit/:id",
            name:"useredit",
            component: () => import ("@/views/User/UserEdit.vue")
       },

> ***this.$routr.params.id 拿到值***

## 总结 ##

其实，按照**RusultFull**来看，**params传参**会好一点。

反正，我没觉得，那个会隐藏路径。

发表评论取消回复

表情：

评论列表（有 0 条评论，76人围观）

还没有评论，来说两句吧...

相关阅读

相关 VueRouter路由传参

1. 前言本小节我们介绍 VueRouter 路由组件传参。包括 params 传参、query 传参的两种方式。路由传参的知识点非常重要，在日常开发中，我们经常会通过

Myth丶恋晨/ 2024年03月27日 08:47/ 0 赞/ 103 阅读

相关 vue路由传参

前言之前，查了其他博客，总结一篇,发现貌似不对？？，因此又查了一遍好不容易写了出来。 1.query传参一种是，这样滴。 // 跳转 thi

水深无声/ 2023年10月13日 08:03/ 0 赞/ 21 阅读

相关 vue学习 -- vue-router路由传参

前言之前，查了其他博客，总结一篇,发现，因此又查了一遍好不容易写了出来。 1.query传参一种是，这样滴。 // 跳转 this.$rou

朴灿烈づ我的快乐病毒、/ 2023年10月12日 00:28/ 0 赞/ 77 阅读

相关 vue-03-路由-路由传参

和平时的页面跳转一样，我们可能需要在地址栏上传递某些参数，例如，从商品列表页面，跳转的某个商品的详情页面，这个时候，如果是页面跳转的时候，我们会直接在url上跟上一个商品id，

男娘i/ 2023年07月20日 13:40/ 0 赞/ 17 阅读

相关 vue路由传参

vue路由跳转页面传参 1、使用路由url携带参数传递主页Main.vue模板脚本 <template> <div class="hell

迷南。/ 2022年11月29日 13:28/ 0 赞/ 353 阅读

相关 vue 路由传参

this.$router.push({path:'home',name:'主页'params:{id:1}} 或者 <router-link :to="{

àì夳堔傛蜴生んèń/ 2022年05月29日 09:00/ 0 赞/ 342 阅读

相关 vue路由传参

在vue中使用插件的步骤 1、引入Vue 2、引入插件 3、使用插件 Vue.use() 当路由配置成功以后Vue中就会多了两个内置组件 <router-view>

雨点打透心脏的1/2处/ 2021年10月26日 15:40/ 0 赞/ 488 阅读

相关 Vue路由跳转+路由传参

之前在原生JS的开发中，我们经常会用到根据某一状态进行页面的跳转。比如：登录成功跳到首页，点击商品列表的某个商品跳转商品详情等。而常见的写法就是： locat

骑猪看日落/ 2021年09月18日 19:10/ 0 赞/ 654 阅读

相关 vue-router：路由传参

在设置路由规则时，我们可以给路径名设置一个别名，方便进行路由跳转，而不需要去记住过长的全路径。例如： <%@ taglib prefix="c" uri="

柔情只为你懂/ 2021年09月14日 15:10/ 0 赞/ 523 阅读

相关 vue的路由传参

1.使用router-link进行页面按钮跳转路由文件配置 export default new Router({ routes: [

水深无声/ 2021年09月02日 04:07/ 0 赞/ 525 阅读