vue-router参数传递

第一种：get方法

传值：

<router-link :to="{path:'/get',query:{userId:123,username:'xia'}}">get跳转</router-link>
//或
<router-link :to="{name:'get',query:{userId:123,username:'xia'}}">get跳转</router-link>

接收值：

//在get.vue文件中
<template><div><p>get跳转页</p><p>userId:{{userId}}</p><p>username:{{username}}</p></div>
</template>
<script>export default {data(){return{//接收值：userId:this.$route.query.userId,username:this.$route.query.username,}}}
</script>

结果：url上显示参数，页面刷新后参数不会消失；

第二种：post方法

传值：

<router-link :to="{name:'post',params:{stuId:456,stuName:'shang'}}">post跳转</router-link>
//路由path带着路由参数params时,params不生效，错误示范：
<router-link :to="{path:'/post',params:{stuId:456,stuName:'shang'}}">post跳转</router-link>

接收值：

<template><div><p>post页面</p><p>studentId:{{stuId}}</p><p>studentName:{{stuName}}</p></div>
</template>
<script>export default {data(){return{//接收值：stuId:this.$route.params.stuId,stuName:this.$route.params.stuName,}}}
</script>

结果：url上不显示参数，页面刷新后参数会消失；

第三种：路由方法

传值：

<router-link to="/route/789/zuo">路由跳转</router-link>

接收值：

<template><div><p>路由传值</p><p>rouId:{{rouId}}</p><p>rouName:{{rouName}}</p></div>
</template>
<script>export default {data(){return{rouId:this.$route.params.rouId,rouName:this.$route.params.rouName,}}}
</script>

结果：url上显示参数，页面刷新后参数不会消失；

注意：

（1）

上文中router-link中的path和name都是路由里面的，页面创建成功后一定要配置页面的路由；

上文中第三种方法，还在路由中也进行了相应的配置；

路由中的配置：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path: '/get',name:'get',component: resolve => require(['../components/get.vue'], resolve),meta: {title: 'get'},},{path: '/post',name:'post',component: resolve => require(['../components/post.vue'], resolve),meta: {title: 'post'},},{path: '/route/:rouId/:rouName?'name:'route',component: resolve => require(['../components/route.vue'], resolve),meta: {title: 'route'},}]
})

（2）

当在链接上设置replace属性，点击时，会调用router.replace()而不是router.push()，于是浏览器不会留下history记录，也就是无法返回上一页，但会进入上上页；

（3）

在组件中获取参数：

<template><div><p>{{$route.params.userId}}</p><p>{{$route.params.userName}}</p></div>
</template>

简单说明router和route的区别：

$router ：是指整个路由实例,你可以操控整个路由，用法如下：

this.$router.go(-1); // 向前或者向后跳转n个页面，n可为正整数或负整数
this.$router.push('/'); // 跳转到指定url路径，history栈中会有记录，点击返回会跳转到上个页面
this.$router.replace('/'); // 跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面

$route：是指当前路由实例$router跳转到的路由对象；路由实例可以包含多个路由对象，它们是**父子包含关系**.

this.$route.params.userId// 获取路由传递过来的参数
this.$route.query.userName// 获取路由传递过来的参数

vue-router参数传递相关推荐

Vue Router 4.0 正式发布！焕然一新。
关注若川视野,回复"pdf" 领取资料,回复"加群",可加群长期交流学习 12月8日,Vue Router 4 正式发布稳定版本. 在经历了 14 个 Alph ...
【Vue.js】Vue.js中常用的UI组件库和Vue Router
1.Vue生态中常用的UI组件库 1. vant 介绍轻量级.可靠的移动端 Vue 组件库有赞前端团队出品 GitHub地址:https://github.com/youzan/vant 特性拥 ...
Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战前言一.什么是单页面应用及实现前端路 ...
Vue Router：vue中实现前端路由
Vue Router 官方文档文章目录一.路由简介路由分类路由安装二.路由基本使用安装路由器并设置路由规则实现路由切换指定组件的呈现位置 this中的 $router 和 $route ...
Vue Router 原理分析与实现
陈丹青:看过的东西走过的路,还有你所经历的一切,都会经历一个开眼界的过程. 但眼界开了并不是一件好事情,反而顿悟之后从此你就会知道,你在社会之中是完全没有位置可言的.我算个屁,什么事都有人做过,都有人 ...
Vue | Vue Router 路由的使用
文章目录一.路由的基本使用 1.创建 Vue 项目并引入 vue-router 2.编写 Components 组件 3.编写路由文件 4.在主文件 Main.js 中引入路由 5.添加 route ...
VUE探索第三篇-路由(vue router)
一.vue router介绍 Vue Router是Vue.js官方的路由器,页面间的跳转(比如A->B->C)是一组路由,而Vue Router是管理这些路由的集成器.Vue Route ...
Vue Router详细教程
1.什么是路由 1.1路由简介说起路由你想起了什么?路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科额,啥玩意? 没听 ...
vue router 入门笔记
vue router 入门笔记 tips: components优先级大于component,即当一个route对象里同时配置了component和components时component视为无效即 ...
你可能不清楚的 Vue Router 深度用法（一）
Vue Router 简单易上手,能实现大部分的需求.但是,如果在项目里需要更细致的控制路由,以实现与其同步的效果,就需要挖掘其文档里没详细提及的内容.第一章为路由元信息用途挖掘. 路由元信息用途 ( ...

vue-router参数传递

vue-router参数传递

vue-router参数传递相关推荐

最新文章

热门文章