精解vue中＄router 和＄route




在这里插入图片描述

this.$router.push(’/路径/’)进行跳转路由
push只是其中一个属性，这里就不再一一介绍

this.$route可以拿到我们传递的参数和动态路由id
params
query

我们可以先把这二者关系通俗的理解为：

router是我们当前配置的所有路由，route是处于活跃状态的其中一个路由

this.$router

  • 我们在配置过程中所有的路由都存放在router对象中
  • 通过this.$router.push('/路径/')，可以让我们进行路由的跳转， 并向history栈中添加此路由
  • 这里的router对象本质就是VueRouter实例

在这里插入图片描述

this.$route

通俗的理解是当前哪一个路由处于活跃状态，取出的就是哪一个路由

传递参数的方式

当我们在进行路由的跳转时，可能会想要传递一些参数，vue官方也给出了两种方式

  • params
  • query

params

首先我们需要清楚一个概念，它们的本质是什么，这里我们引入一个概念：动态路由

我们一般是一个组件写一个路由，但当我们处理用户界面时，路由往往是不确定的，所以我们希望路由的传递可以有一个动态的改变，比如以下路径：后面是大量用户的ID

/user/mary

/user/kris

我们来实现一下，不用vue里的 <router-link</router-link

我们在router文件下的index.js中先进行配置

在这里插入图片描述
在这里插入图片描述

配置好以后我们需要去APP.vue中写一个传递参数的方法

通过拼接字符串的方法，这时我们点击用户按钮，执行btnUser方法，跳转路由到用户界面

在这里插入图片描述

但此时我们还没有配置用户界面，我们来给他进行渲染

在这里插入图片描述

这里就要用到this.$route，用户界面的路由是当前最为活跃的路由（正在被使用），我们就可以拿到userId这个参数

在这里插入图片描述

query

路由配置格式：正常配置

router/index.js

在这里插入图片描述
在这里插入图片描述

App.vue中写入js方法

在这里插入图片描述

Profile.vue获取传递的对象并渲染

在这里插入图片描述

在这里插入图片描述

# javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue