Vue中router-link路由跳转以及传参方式

1、query的方式

<router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>

使用：this.$route.query.id

地址栏： http://localhost:8081/#/test?name=1

2、params的方式

<router-link :to="{name:'/test',params: {id: id}}">跳转</router-link>

使用：this.$route.params.id

地址栏： http://localhost:8081/#/test/12345

配置路由：

{path: '/test/:id',component: testingCenter,meta: { title: '检测中心' }
}

传参：

<router-link :to="'/test/'+id">跳转</router-link>

使用：this.$route.params.id（这个id给上图路由的配置有关）

地址栏：http://localhost:8081/#/test/1

Vue中router-link路由跳转以及传参方式相关推荐

vue中的路由跳转和传参
一:注意:在 Vue 实例中,你可以通过 $router 访问路由实例.因此你可以调用 this.$router.push("路由地址")来跳转到目标路由页面: 想要导航到不同的 ...
11.14 尚品汇 day01 脚手架，路由命名，路由跳转，传参，props传参，重写push,replace
less使用 npm i less npm i less-loader 安装easy less 1)要求 1.1:每一天老师书写代码务必三遍 1.2:node + webpack + VScode + ...
Flutter开发之路由跳转与传参（七）
参考练习:https://book.flutterchina.club/chapter2/flutter_router.html 路由(Route)在移动开发中通常指页面(Page),这跟web开发中 ...
微信小程序开发：路由跳转以及传参的使用
前言微信小程序开发中的大部分知识点和前端开发是一模一样的,就算具体的语法不一样,但是套路都是一样的,可以说微信小程序开发和前端开发使用的知识点基本一致.本篇博文就来分享一下在微信小程序开发中必用的知 ...
vue中定时器一般用法，定时器函数传参以及清除定时器
一.vue中定时器一般用法(举个例子) 显示当前时间, setInterval()方法会每秒执行一次函数,类似手表功能: <template><div class="use ...
vue中两种路由跳转拼接参数
this.$router.push({name:"Home",query:{id:1,name:2}}) // 取到路由带过来的参数 let routerParams = this ...
【uniapp小程序】路由跳转navigator传参封装
文章目录
vue中实现路由跳转的三种方式（超详细整理）
vue中实现路由跳转的三种方式一.使用vue-router vue-router 本质是一个第三方的包用的时候需要下载步骤 (7步法 ): 下载vue-router模块到当前工程 yarn ad ...
vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）
this.$router.push进行编程式路由跳转传参 router中路由配置组件home点击传参组件homeDetails接受参数 router中路由配置 params第一种传参路由配置 {p ...
Vue中this.$router.push路由跳转,刷新参数消失
Vue中this.$router.push路由跳转,刷新参数消失 this.$router.push({name:"",params:{id:""}}) nam ...

Vue中router-link路由跳转以及传参方式

1、query的方式

2、params的方式

Vue中router-link路由跳转以及传参方式相关推荐

最新文章

热门文章