vue使用this.$route获取路由信息

原创 已于 2022-08-17 17:06:10 修改 · 4.3k 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
vue项目经验

当前文章被收录于：

vue项目经验
47 篇文章 3 人学习
订阅专栏 查看详情
vue项目实用方法

当前文章被收录于：

vue项目实用方法
43 篇文章 5 人学习
订阅专栏 查看详情
于 2021-12-21 13:14:29 首次发布
本文介绍了Vue.js中this.$route.path属性与浏览器location.pathname属性的使用方法，两者均可获取当前页面的路由路径。

一、this.$route

 this.$route.path为页面的路由路径

二、location

 location.pathname  和this.$route.path效果相同

标签
#vue.js #javascript #前端
vue中的路由
m0_57923701的博客
09-13 1188
前端路由作用: 实现业务场景切换 因为Vue是单页面应用(SPA): 所有功能在一个html页面上实现 路由的优点： 整体不刷新页面，用户体验更好 数据传递容易, 开发效率高 #哈希值后面传入参数 过程： 首次加载会比较慢一点。不利于seo vue-router基本使用 官网: Vue Routerhttps://router.vuejs.org/zh/ vue-router模块包 它和 Vue.js 深度集成 安装： yarn add vue-...
路由跳转后this.$route.path的变化
haohaoxueqd的博客
11-07 1839
route.path变化
Vue学习篇(十四)—路由(二)
云澈的博客
07-21 1215
早期的网站开发整个HTML页面是由服务器来渲染的. 服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示. 但是, 一个网站, 这么多页面服务器如何处理呢?
路由route的获取query和path区别
m0_71266543的博客
08-30 945
路由route的获取query和path区别
vue项目中动态加载路由组件this.$route.path获取不正确（获取是‘/‘而不是‘/AppHome’）
晚风的博客
12-21 4789
问题如图 明明浏览器url看到的path是/AppHome，但是使用this.$route.path或者location.pathname获取的path路径却是错误的‘/’，这是为什么呢？ 问题出在当项目启动时，懒加载方式，路由加载注册的时候没有加载path:'/AppHome'下的$route 我当时是这样写的 这种方式写会导致出现这种情况，我们换种方式 （在上面import了这个页面） 完美解决 ，path获取正确了 ...
vue获取路由信息
勋勋勋勋小勋勋的博客
11-08 1099
this.$router.options.routes //获得所有路由信息； this.$route //获得当前路由信息
Vue中this.$router与this.$route的区别及其应用
qq_49428237的博客
03-01 5022
总结this,$router与this.$route的含义以及常见用法
this.$router和this.$route的区别以及使用
weixin_47800450的博客
01-03 2848
this.$router this.$router 全局路由对象，任何页面都可以通过此方法 调用 push(), go()等方法。一般用于路由跳转。 如： this.$router.push(路由) 跳转指定路由; this.$router.push({ path: '/datadisplay', query: {state: this.state}, // 这个是放在?后面的 // 如：this.$router.push({'path':'/asv', query:{a=1}})，生成的路由
vue——this.$route 与 this.$router
奔跑的程序员
11-04 2927
this.$route 用来获取路由信息，包含的是路由基本信息，如fullPath等， this.$router 用来进行路由操作，在原型链(__proto__)中包含路由的处理方法，如跳转push等。 this.$router.push('/') //跳转到根目录，保留历史记录，可以返回 this.$router.replace('/') //跳转到根目录，替换掉当前历史记录，无法返...
刷新页面后this.$route.params 为空
赤蓝紫の博客
03-08 3208
刷新页面后this.$route.params 为空 个人博客：刷新页面后this.$route.params 为空 深度学习vue-router时，按官方文档的教程看下来，结果发现刷新页面后，打印的this.$route.params为空 Vue2 问题复现 路由配置： import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const router = new VueRouter({ routes:
vue路由$route和$router的区别
yihanzhi的博客
01-21 449
1、$route：路由信息对象，只读； 用于读取路由参数，如 this.$route.params.appId 2、$router：路由操作对象，只写 用于进行路由跳转，如 this.$router.push({ name: 'index', query: { appId: 1 } }) ...
谈谈$router和$route的不同
m0_62061660的博客
11-11 300
在vue2中：1.this.$router是VueRouter的一个实例，是一个全局路由对象，它可以用来操作路由，在项目中我们一般用它来做路由跳转，例如：我们经常需要跳转到另一个页面时，就会用到this.$router.push()。2.this.$route是当前激活的路由对象，通过它我们可以拿到当前路由的一些信息，比如：path、query、params、meta等等。3.举个开发中的例子：比如在页面中，我们点开某条数据的详情，点击时我们需要进行跳转路由到详情页面去，此时我们就可以使用this.$rou
vue-router路由中 this.$router 与this.$route区别
wenfu814的博客
08-27 400
his.router与this.router与this.router与this.route 两者相差 一个 r 但是差距蛮大的 一开始没注意这些 细节 数据没获取到 也没有报错 嫩是 耽误了一会时间 寻找 this.$router 实际上 就是全局 路由对象 任何页面 都可以 调用 push (), go()等方法 this.$route 表示当前正在用于跳转的路由器对象，可以调用其name、path、query、params等属性； ...
vue-router query和params传参(接收参数)，$router、$route的区别
weixin_66375317的博客
05-16 2406
vue-router query和params传参(接收参数)，$router、$route的区别
VUE 获取路由参数
Judy1623
11-19 1048
vue 获取当前页面的路由参数 this.$route 在当前页面 this.$route 输出当前页面路由信息 { name: "home", meta: {…}, path: "/", hash: "", query: {…},fullPath:'/',matched:[{}] ,params:{} } 获取当前页面的路由信息 this.$route ...
this.$router 与 this.$route 区别
撒由那拉
11-30 1150
this.$router：表示全局路由器对象，项目中通过router路由参数注入路由之后，在任何一个页面都可以通过此方法获取到路由器对象，并调用其push(), go()等方法；this.$route:表示当前正在用于跳转的路由器对象，可以调用其name、path、query、params等方法；...
vue获取当前路由的子路由列表
热门推荐
aithena的博客
04-23 1万+
this.$router：获取全局路由 this.$route：获取当前路由信息 computed: { // 获取当前路由的子路由 routes(){ var routes = { children: this.$router.options.routes }; var route = this.$route.mat...
直白明了之this.$router和this.$route的区别和用法
weixin_42498482的博客
06-18 453
this.$router 路由的操作阶段, 路由跳转 语法: 两种传参数形式, params和query this.$router.push({path: ‘路径’, name: ‘路由名称’, params: ‘对象,传递的参数’, query: ‘对象,传递的参数’}) this.$router.go() // 数值或对象,即前进或后退.负数后退,整数前进,赋值操作一目了然. this.$route 路由的获取阶段, 单个路由 语法: 两种传参数形式, params和query this.$route.
$route和$router之间的区别
sinat_36048532的博客
11-26 171
this.$router 拿到的就是我们创建的VueRouter对象 this.$route指的是当前活跃的路由 所有的组件都继承自Vue类的原型 Vue.prototype.test = function () { console.log(“test”); }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值