vue-router路由中 this.$router 与this.$route区别

最新推荐文章于 2024-05-24 10:20:23 发布
最新推荐文章于 2024-05-24 10:20:23 发布
阅读量2w 收藏 25
点赞数 10
分类专栏： vue实践
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41296616/article/details/80537626
版权

最近在重构网站 遇到参数传递 一些小细节问题    this.$router与this.$route 两者相差 一个 r 但是差距蛮大的   一开始没注意这些 细节  数据没获取到 也没有报错   嫩是 耽误了一会时间 寻找  

1. 

this.$router 实际上 就是全局 路由对象  任何页面 都可以 调用 push

(), go()等方法


2.

this.$route  表示当前正在用于跳转的路由器对象，可以调用其name、path、query、params等属性；



小马哥的天涯
关注
  • 10
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
导出const路由器：VueRouter =新的VueRouter（{路由：[{路径：'/'，名称：'index'，组件：Index，}，]，}，）; // sitemapMiddleware.js从“ vue-router-sitemap”导入VueRouterSitemap； 从“路径”导入路径； 导入...
Vue路由对象属性 .meta $route.matched详解
12-13
$route.fullPath 1 路由是：/path/:type...const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field meta: { requiresAu
【Vue】this.$router与this.$route的区别
TurtleOrange的博客
07-28 460
【Vue】this.$ router 与 this.$ route 的区别 1.this.$ router this.$ router 访问路由器 ； this.$router 是一个全局的路由器对象，包含了很多属性和对象（比如 history 对象），任何页面都可以调用其 push(), replace(), go() 等方法。 2.this.$ route this.$ route 访问当前路由 ； this.$ route 表示当前路由对象，每一个路由都会有一个 route 对象，是一个局部的对
使用 vue-router，页面加载完成后，$route 的值不正确
笔记本
01-20 7002
1 问题描述 页面加载时，需要判断：地址能否匹配上路由。如果匹配不上，就跳转到首页。 代码： mounted(){ if (this.$route.matched.length === 0) { this.$router.push("/index"); } } 问题出现了：当访问的地址可以匹配上路由时，也会跳到首页。 2 找到问题 在 mounted 中打印 $route： 可以看到...
vue的this.$ 常见的用法
最新发布
weixin_45266691的博客
05-24 490
是一个常见的用法，用于访问 Vue 实例的一些内置属性、方法或者插件提供的功能。: 访问用于发起 HTTP 请求的插件，如 axios、vue-resource 等。属性和方法，具体可根据需要查看 Vue.js 的官方文档以及所使用的插件的文档。: 在当前实例上监听一个自定义事件，但是只触发一次。: 响应式地添加一个属性到 Vue 实例的数据对象。: 响应式地删除 Vue 实例的数据对象的属性。: 在子组件中触发父组件绑定的事件。: 监听 Vue 实例上的数据变化。: 获取 Vue 实例的数据对象。
vue中的路由（vue router）
年少不知曲中意,再听已是曲终人
05-10 833
文章目录一、Vue Router的基本使用1、引入路由2、创建组件对象3、创建路由规则对象4、将路由对象注册到vue实例5、在页面中显示路由的组件6、根据链接切换路由 一、Vue Router的基本使用 Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。---摘自官网 通俗理解：通过使用Vue Router可以使现有的开发方式更加灵活，它可以根据前端请求url在对应的页面中展示不同组件。 1、引入路由 <scrip
$router和$route
weixin_44020809的博客
08-04 411
router和route 在组件内打印出this.$router和在main.js中打印出的router是同一个东西 但是在组件里打印出route和router就不一样了 route是组件自己配置的路由。 所有的组件都继承自Vue的原形 导航守卫 导航守卫就是路由跳转过程中的一些钩子函数，路由跳转时一个大的过程，这个过程可以细分为跳转前中后等过程，每个过程都有一个函数，这个函数，能让你操作一些其他的事。 vue-router提供的导航守卫主要用来监听路由的进入和离开的 vue-router提供了befo
Vue中this.$router.push参数获取方法
11-26
由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。 及通过路由配置的name属性访问 在路由配置文件中定义参数：   通过name...
vue-router3.0版本中 router.push 不能刷新页面的问题
11-30
昨天发现有些路由不能正常跳转，找了一下发现都是那些实例化后使用 router.push 而不是直接使用 this.$router.push 的地方。 出现的情况是 router.push 后，url变化了，但是页面没有刷新，手动刷新一下才出现应有的...
vue-router路由 myv源码.zip
09-03
1. **Router 实例**：通过 `new VueRouter(options)` 创建，`options` 包含路由配置数组。 2. **Route构造函数**：表示一个路由对象，包含了当前路由的信息，如 path、params、query、matched 等。 3. **HashHistory...
this.$route.path
yang295242361的博客
03-12 1万+
//获取当前路由地址 //http://localhost:8002/#/addGoods => addGoods this.$route.path.replace('/','')
this.$route路由对象属性
Blablabla_的博客
11-02 3523
包括的属性有： $route.path 类型: string 字符串，对应当前路由的路径，总是解析为绝对路径，如 “/foo/bar”。 $route.params类型: Object 一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。在使用带参数的路由路径时，传递的参数值。 $route.query类型: Object 一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user ==
路由跳转后this.$route.path的变化
haohaoxueqd的博客
11-07 1680
route.path变化
vue使用this.$route获取路由信息
晚风的博客
12-21 3990
一、this.$route this.$route.path为页面的路由路径 二、location loaction.pathname 和this.$route.path效果相同
直白明了之this.$router和this.$route的区别和用法
weixin_42498482的博客
06-18 343
this.$router 路由的操作阶段, 路由跳转 语法: 两种传参数形式, params和query this.$router.push({path: ‘路径’, name: ‘路由名称’, params: ‘对象,传递的参数’, query: ‘对象,传递的参数’}) this.$router.go() // 数值或对象,即前进或后退.负数后退,整数前进,赋值操作一目了然. this.$route 路由的获取阶段, 单个路由 语法: 两种传参数形式, params和query this.$route.
vue-router
青蛙king的博客
08-08 1万+
一、如何引入并使用Vue Router 使用 Vue.js 通过组合组件来组成单页面应用程序时，如何引入并使用Vue Router 呢？ 第一步，将组件 (components) 映射到路由。 第二步，告诉 Vue Router 在哪里渲染它们。 二、动态路由匹配 三、嵌套路由 四、编程式的导航 五、命名路由 六、命名视图 七、重定向和别名 八、路由组件传参 九、HTML5 History 模式 ...
Vue中this.$router的使用
weixin_43931617的博客
02-14 2万+
vue中this.$router.push有两种使用方法： 传入参数且地址栏中带上参数内容 this.$router.push({path/name: ' 路由 ', query: {key: value}}) （是path还是name由你自己定，如果是name那么在定义路由的时候需要写明 类似这种： { path: '/home', name: 'Home', component...
Vue 中 this.$router 与 this.$route 的区别 以及 push() 方法
热门推荐
VirgoYellow 的专栏
03-05 9万+
官房文档里是这样说明的： 通过注入路由器，我们可以在任何组件内通过this.$router访问路由器，也可以通过this.$route访问当前路由 可以理解为： this.$router 相当于一个全局的路由器对象，包含了很多属性和对象（比如 history 对象），任何页面都可以调用其 push(), replace(), go() 等方法。 this.$route 表示当前路由...
vue2中this.$route this.$router的区别
04-01
在Vue2中，this.$route和this.$router都是Vue Router提供的API，但是有不同的作用。 - this.$route：用于获取当前路由的信息，例如当前路径、参数等。它是一个只读的对象，不能直接修改。 - this.$router：用于进行路由的导航操作，例如跳转到其他页面、前进后退等。它是一个可写的对象，可以调用其方法进行路由导航操作。 总的来说，this.$route用于获取路由信息，this.$router用于进行路由导航操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值