vue-router路由参数（params和query）

⼀、params和query

params⽅法传参的时候，要在路由后⾯加参数名占位；并且传参的时候，参数名要跟路由后⾯设置的参数名对应。

/user/:id这个路由匹配/user/111, /user/222这⾥的 id就是 params

query⽅法，就没有这种限制，直接在跳转⾥⾯⽤就可以。

/user?id="111"

/user?id="222"

这⾥的 id就是 query

⼆、query和params的⽤法

1、params:

1.1 路由配置：

// 使⽤params传参，路由配置的时候 path 要带上参数
{path: '/user/:id',name: "users",component: User    //这个 User 是组件名称}

1.2 跳转⽅式：

// ⽅法1：
<router-link :to="{ name: 'users', params: { id: this.id}}">按钮</router-link>
// ⽅法2：
this.$router.push({name:'users',params:{id: this.id}})
// ⽅法3：
this.$router.push('/user/' + this.id)

1.3 页⾯url显⽰：

params在浏览器地址栏中不显⽰参数名

1.4 获取参数⽅式:

this.$route.params.id

2、query:

2.1 路由配置

//使⽤ query 传参这⾥不需要参⼊参数，参见上⾯的params写法
{path: '/user',    name: "users",component: User    //这个 users 是传进来的组件名称}

2.2 跳转⽅式：

// ⽅法1：
<router-link :to="{ name: 'users', query: { id: this.id }}">按钮</router-link>
// ⽅法2：
this.$router.push({ name: 'users', query:{ id: this.id }})
// ⽅法3：
<router-link :to="{ path: '/user', query: { id: this.id }}">按钮</router-link>
// ⽅法4：
this.$router.push({ path: '/user', query:{ id: this.id }})
// ⽅法5：
this.$router.push('/user?id=' +  this.id)

2.3 页⾯url显⽰：

query在浏览器地址栏中显⽰参数名称

2.4 获取参数⽅式:

this.$route.query.id

vue-router路由参数（params和query）相关推荐

html 刷新页面未传参数值,vue router路由参数刷新消失问题的解决方法
场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: 'index', params: res.data})传给主页组件,并 ...
Vue Router 路由管理
文章目录 Vue Router 路由管理概述安装简单使用定义2个组件定义路由信息支持路由使用路由动态路由配置动态路由配置404 限制动态参数嵌套路由命名路由编程式导航简单使 ...
vue router 路由跳转方法概述
一.概述使用到Vue的项目,我们最常见使用的就是Vue配套的Vue Router库. 那么在平日开发中,有多少种跳转路由的方法? 二.跳转方法 1.使用router-link标签使用router- ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
【Vue】相关生态——Vue Router路由
Vue Router路由基本使用带参数的动态路由匹配捕获所有路由或404 Not found 路由嵌套路由编程式导航重定向和别名将props传递给路由组件不同的历史模式进阶导航守卫 ...
Vue Router路由常用功能总结
Vue Router路由常用功能总结一.前言二.安装 1. vueCLI安装 2. npm安装三.路由配置及使用: 1. 基本配置: 2. 动态路由: 3. 嵌套路由: 四.编程式的导航五.重 ...
Vue.js 3.0 学习笔记（十一）Vue Router路由
一.使用Vue Router 1.HTML页面使用路由 <!DOCTYPE html> <html> <head><meta charset="UT ...
Vue Router 路由导航
Vue Router 通过 Vue.js,我们已经用组件组成了我们的应用.当加入 Vue Router 时,我们需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们. V ...
Vue Router路由管理器
目录: 相关理解基本路由几个注意事项嵌套(多级)路由路由的query参数命名路由路由的params参数路由的props配置路由跳转的replace方法编程式路由导航缓存路由组件 a ...
Vue | Vue Router 路由的使用
文章目录一.路由的基本使用 1.创建 Vue 项目并引入 vue-router 2.编写 Components 组件 3.编写路由文件 4.在主文件 Main.js 中引入路由 5.添加 route ...

vue-router路由参数（params和query）

⼀、params和query

⼆、query和params的⽤法

1、params:

2、query:

vue-router路由参数（params和query）相关推荐

最新文章

热门文章