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

朴灿烈づ我的快乐病毒、 2023-10-12 00:28 19阅读 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 条评论，19人围观）

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

相关阅读

相关 VueRouter路由传参

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

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

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

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

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

相关 vue路由传参

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

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

相关路由传参

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></titl

末蓝、/ 2022年06月01日 00:14/ 0 赞/ 271 阅读

相关 vue 路由传参

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

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

相关 vue路由传参

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

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

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

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

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

相关 vue-router：路由传参

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

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

相关 vue的路由传参

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

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

相关 vue 路由动态路径传参、路由嵌套

1、路由动态路径传参 (1)使用 1、在路由路径中 routes: [ { path: '/user/:id'

﹏ヽ暗。殇╰゛Y/ 2021年07月24日 20:42/ 0 赞/ 897 阅读