精解vue中＄router 和＄route

最新推荐文章于 2022-04-09 11:07:11 发布
置顶 最新推荐文章于 2022-04-09 11:07:11 发布
阅读量3.8k 收藏 45
点赞数 20
分类专栏： vue 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46242909/article/details/113059077
版权

精解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获取传递的对象并渲染

在这里插入图片描述

在这里插入图片描述

请对长亭晚
关注
  • 20
    点赞
  • 踩
  • 45
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 29
    评论
专栏目录
Vue2 新手上路无处不在的特殊符号，让人傻傻分不清 “:”、“.”、“@”、“#” 、“{{}}“ 、“$“,‘$bus‘,‘$event‘
LlanyW的专栏
12-29 6万+
1）$ mount:vue内部除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。.prevent 阻止浏览器默认行为(@click.prevent="clickFn")：写法：{{xxx}}，xxx 是 js 表达式，可以直接读取到 data 中的所有区域。2）$(形参){方法体}:js的方法名定义规则比较广泛，可以是方法名的定义；.stop 阻止冒泡(@click.stop="clickFn")Vue中有很多的指令，且形式都是 v-xxx， 框架。有参数,就用$event占位,在回调中e接收。
route和router的区别
fanyunfei0510的博客
10-13 1779
：详细讲解vue 的路由router，route和router的区别 $route对象表示当前的路由信息， 包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。 ￥route.param 能够获取前台路径传过来的参数 1.$route.path** 字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。 $router对象是全局路由的实例，是router构造方法的实例。 2.$route.params** 一个 key/value 对象，包含了
路由vue-router在新窗口打开页面
HongHu-ing的博客
09-16 1091
一.使用标签 需要注意的是,router-link并不支持 target="_blank" 属性,所以需要tag="a"属性把router-link渲染成标签 <router-link tag="a" target="_blank" :to="{name:'List',query:{id: 'val'}}">详情页</router-link> 二.使用编程式导航 有些时候需要在单击事件或者在函数中实现页面跳转，那么可以借助router的示例方法，通过编写代码实现。我们常用的是rou
浅谈vue中的$含义及其用法（$xxx引用的位置）
vvv3171071的博客
04-09 2万+
看了各个帖子的描述，还是未能参透$在vue中所想发挥的本意，将一些一知半解的理解摘抄下来，顺带附上自己常见的用法，以加深理解和记忆。 摘抄 这些只是Vue的命名规则，为了区分普通变量属性，避免我们自己声明或者添加自定义属性导致覆盖 $event 是 vue 提供的传递实践的参数。 $是在vue中所有实例中都可用的一个简单约定，这样做会避免和已被定义的数据，方法，计算属性产生冲突。 $是在vue中所有实例中都可用的一个简单约定，这样做会避免和已被定义的数据，方法，计算属性产生冲突。 另一个好问题
$route 和 $router 的区别
qg2276879379的博客
09-24 1375
$route 和 $router 的区别 $route $route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。 1、$route.path 字符串，对应当前路由的路径，总是解析为绝对路径，如 “/foo/bar”。 2、$route.params 一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果没有路由参数，就是一个空对象。 3.$route.query 一个 key/value 对象，表示 URL 查询参数。 例如
算法精解 c语言 中文版
07-24
算法精解 c语言 中文版，适合学习算法和程序员 算法精解：C语言描述 中文版 pdf
UNIX shell范例精解(第4版)中文
06-16
在本书的再版中,Quigley对她的经典著作进行了全新的改版,增加了当前shell程序员所需的最新内容——使用bash进行Linux shell编程。 本书汇聚了Quigley 21年来的 shell编程教学经验。书中不仅展示了能帮助读者快速入门...
OpenCV算法精解-代码
07-12
OpenCV算法精解-代码
高中历史对过渡时期总路线和总任务的几点认识教材精解素材.docx
11-27
高中历史对过渡时期总路线和总任务的几点认识教材精解素材.docx
vue $router和$route的区别
热门推荐
清风了了的博客
06-08 10万+
一、 router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。。。 this.$router.push会往history栈中添加一个新的记录。。详细见vue官方文档https://router.vuejs.org/zh/guide/es...
10-06￥Vue项目中小总结
xiannverhaha的博客
10-06 85
ref 尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。例如： <base-input ref="usernameInput"></base-input>    你已经定义了这个 ref 的组件里，你可以使用： this.$refs.usernameInput *$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。用于直接操..
vue的这个知识点初学者你需要知道一下----vue实例对象有关`$`符号在vue中的理解
倪灵-ziop
03-21 4419
     本文主要讲的是有关vue当中对于 $ 符号的理解。 如果你已经明白他的含义了，那么看到这里你已经可以忽略这篇文章了，这是一篇偏向于基础的文章。 官方文档原话是这样说的： 除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。 用户自己可以给vue对象创建属性与方法，当然，vue自己也给用户暴露了一些属性与方法，为了区分开用户自己定义的属性与方法，那么v
Vue中$router和$route区别
qq_44626593的博客
02-19 308
$router :是 VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，是一个全局对象，他包含了所有的路由包含了许多关键的对象和属性； $router.push({path:'home'}); //本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录 $router.replace({path:'home'}); //替换路由，没有历史记录 $route是一个跳转的路由对
vue路由中$route与$router，path与name，params与query的区别梳理
meng2lin的博客
12-07 6710
一、router和router和router和route的区别 $router : 是路由操作对象，只写对象 route:路由信息对象，只读对象栗子：//route : 路由信息对象，只读对象 栗子： //route:路由信息对象，只读对象栗子：//router操作 路由跳转 this.$router.push({ name:'hello', params:{ ...
Vue.js 2.0中$on与$emit如何使用之实例讲解
极客神殿
12-08 714
先对两个方法来一波解释 vm.$on(event,callback) 参数： {string | Array} event (数组只在 2.2.0+ 中支持) {Function} callback 用法： 监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 示例： vm.$on('test', function (msg) { co...
$route详解
weixin_42101753的博客
05-15 5178
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <titl
vue中 $router 和 $route 的区别
weixin_45628827的博客
02-25 923
vue中 $routrt 和 $route 的区别
vue中属性或函数前有$符号，代表什么？
liweibo348的博客
12-23 4477
Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀$，以便与用户定义的属性区分开来。例如： var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // => true vm.$el === document.getElementById('examp...
vue中的$的作用?
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
02-01 2529
为什么我们在使用vue.use(插件名),挂载之后就得this.$插件进行使用. 例如:vuex vuex 是一个插件，当你加载了这个插件，并且 使用 Vue.use(Vuex) 的时候， Vuex 执行了类似下面的代码; Vue.prototype.$store = 模块 所以我们可以在组件里面直接使用 $store ...
dram技术精解 第二版 中文
最新发布
08-04
书中首先介绍了DRAM的基本原理和结构。DRAM是一种常见的计算机主存储器，采用电容来存储数据，并借助电容电荷的存放和释放来读写数据。本书详细解释了DRAM的内部结构，包括位线、单元电容、行选择线和列选择线等重要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 29
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

请对长亭晚

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值