原文网址：Vue--Router--路由传参的方法_IT利刃出鞘的博客-CSDN博客

简介

说明

本文介绍Vue Router路由传参的方式。

router-link标签和this.$router.push都可以进行路由跳转，见：此文。本文使用router-link进行示例。

需求

本文展示用户列表页面到用户主页的跳转。在用户列表页面点击某个用户后，将这个用户的用户名传递给用户主页页面。

公共代码

路由配置

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import UserList from '../views/user/UserList'
import UserHome from '../views/user/UserHome'Vue.use(VueRouter)const routes = [{path: '/',name: 'Home',redirect: '/userList'},{path: '/userList',name: 'UserList',component: UserList},{path: '/user',name: 'UserHome',component: UserHome}
]const router = new VueRouter({routes
})export default router

用户主页

UserList.vue

<template><div><div>用户名：{{ userName }}</div><div>用户昵称：{{ nickName }}</div><div>博客数量：{{ blogCount }}</div></div>
</template><script>
export default {name: 'UserHome',data () {return {userName: '',nickName: '',blogCount: 0}},methods: {getProfile (userName) {const _this = this// 省略：发请求，通过userName获得用户信息const user = {userName: userName,nickName: '这是昵称',blogCount: 121}_this.userName = user.userName_this.nickName = user.nickName_this.blogCount = user.blogCount}},created () {const userName = this.$route.params.userNamethis.getProfile(userName)}
}
</script><style scoped></style>

传参的方式

不带参数

用户列表页面：UserList.vue

<template><div class="user-list-container"><div class="user-item-box":key="user.userName"v-for="user of users"><router-link :to="{name: 'UserHome'}"><!-- 也可以这么写：<router-link :to="/user">-->{{ user.userName }}</router-link></div></div>
</template><script>
export default {name: 'UserList',data () {return {users: {},current: 1,total: 0,size: 10}},methods: {page (current, size) {const _this = thisconst users = [{id: 1,userName: 'Tony',nickName: '刀刃'}, {id: 2,userName: 'Pepper',nickName: '天蓝'}]_this.users = users_this.current = current_this.total = 122_this.size = users.length}},created () {this.page(1, 10)}
}
</script><style scoped></style>

编程式写法：

this.$router.push({name: "UserHome"})

用户主页页面：UserHome.vue

使用this.$route.params.userName接收参数。（不修改公共代码）

测试

params传参

简介

传入参数

<router-link :to="{name: 'UserHome', params: {userName: user.userName}}">xxx
</router-link>

接收参数

this.$route.params.userName

缺点

参数不显示在URL中，刷新页面时参数会丢失。解决方法是：使用动态路由

用户列表页面：UserList.vue

<template><div class="user-list-container"><div class="user-item-box":key="user.userName"v-for="user of users"><router-link :to="{name: 'UserHome', params: {userName: user.userName}}"><!--不能写成下边这样，因为参数传不过去，虽然不报错。--><!--<router-link :to="{path: '/user', params: {userName: user.userName}}">-->{{ user.userName }}</router-link></div></div>
</template><script>
export default {name: 'UserList',data () {return {users: {},current: 1,total: 0,size: 10}},methods: {page (current, size) {const _this = thisconst users = [{id: 1,userName: 'Tony',nickName: '刀刃'}, {id: 2,userName: 'Pepper',nickName: '天蓝'}]_this.users = users_this.current = current_this.total = 122_this.size = users.length}},created () {this.page(1, 10)}
}
</script><style scoped></style>

编程式写法：

this.$router.push({name: "UserHome", params: {userName: userName}})

用户主页页面：UserHome.vue

使用this.$route.params.userName接收参数。（不修改公共代码）

测试

可以看到：刷新页面时参数会丢失。

query传参

简介

传入参数

<router-link :to="{name: 'UserHome', query: {userName: user.userName}}">xxx
</router-link>

或者

<router-link :to="{path: '/user', query: {userName: user.userName}}">xxx
</router-link>

接收参数

this.$route.query.userName

优点

刷新页面时参数不会丢失。

用户列表页面：UserList.vue

<template><div class="user-list-container"><div class="user-item-box":key="user.userName"v-for="user of users"><router-link :to="{name: 'UserHome', query: {userName: user.userName}}"><!-- 也可以写成下边这样--><!-- <router-link :to="{path: '/user', query: {userName: user.userName}}"> -->{{ user.userName }}</router-link></div></div>
</template><script>
export default {name: 'UserList',data () {return {users: {},current: 1,total: 0,size: 10}},methods: {page (current, size) {const _this = thisconst users = [{id: 1,userName: 'Tony',nickName: '刀刃'}, {id: 2,userName: 'Pepper',nickName: '天蓝'}]_this.users = users_this.current = current_this.total = 122_this.size = users.length}},created () {this.page(1, 10)}
}
</script><style scoped></style>

用户主页页面：UserHome.vue

<template><div><div>用户名：{{ userName }}</div><div>用户昵称：{{ nickName }}</div><div>博客数量：{{ blogCount }}</div></div>
</template><script>
export default {name: 'UserHome',data () {return {userName: '',nickName: '',blogCount: 0}},methods: {getProfile (userName) {const _this = this// 省略：发请求，通过userName获得用户信息const user = {userName: userName,nickName: '这是昵称',blogCount: 121}_this.userName = user.userName_this.nickName = user.nickName_this.blogCount = user.blogCount}},created () {const userName = this.$route.query.userNamethis.getProfile(userName)}
}
</script><style scoped></style>

测试

可以发现：

它的路径是这样显示的：http://192.168.0.104:8080/#/user?userName=Pepper
刷新页面时参数不会丢失。

Vue--Router--路由传参的方法相关推荐

Vue动态路由传参和监听路由
Vue动态路由传参 query传参 params传参 //定义Detail路由 {path: '/detail/:id',name: 'Detail'component: () => impor ...
【Vue】路由传参方式
在使用params传递参数时,需要使用name来指定目标,否则会出现数据传输失败 vue的路由传参共有三种方式 1.query传参:不管使用path还是name来匹配路由都可以,然后通过query来传 ...
react更改路由入参_JavaScript基础教程 react router路由传参
本篇教程介绍了JavaScript基础教程 react router路由传参,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入. < 今天,我们要讨论的是react ...
Vue：路由传参的三种方式
文章目录前言方式一:params 传参(显示参数) 1.声明式 router-link 2.编程式 this.$router.push 方式二:params 传参(不显示参数) 1.声明式 rou ...
vue动态路由传参---query传参和params传参
当一个页面跳转到另一个页面时,组件结构相同,只是内容不同且地址栏后缀不同 ,这个地址栏的后缀就是参数,根据不同参数渲染不同的内容,这个跳转就叫路由传参. 当项目中组件间通过路由跳转,有时,我们需要传递 ...
CryptoJS实现vue项目路由传参AES加密
安装: npm i crypto-js 封装方法: import CryptoJS from 'crypto-js/crypto-js';const KEY = CryptoJS.enc.Utf8.p ...
router路由传参 - props
使用props路由传参路由传参 - props 什么是代码的耦合? 路由代码传参模板代码传参布尔模式对象模式函数模式路由传参 - props 使用props可以降低耦合度,取代$route ...
vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）
this.$router.push进行编程式路由跳转传参 router中路由配置组件home点击传参组件homeDetails接受参数 router中路由配置 params第一种传参路由配置 {p ...
Vue 中路由传参（动态路由匹配）
一.解释把数据从一个路由页面传递到另外一个页面的技术这里列举了 params 和 query 的传参方式二.案例案例展示手机列表页传参到手机详情页面(传递的是id) ① params ...
vue动态路由传参的几种方式

Vue--Router--路由传参的方法

简介

公共代码

传参的方式

不带参数

params传参

query传参

Vue--Router--路由传参的方法相关推荐

最新文章

热门文章