Vue项目如何在js文件里获取路由参数及路由跳转
问题描述
在js文件里,直接调用this.$route获取路由参数或者路由跳转,会报错!
解决方案:
1、需要先在js文件里另外引入router
import router from '@/router'
2、路由跳转,或相关方法调用
router等价于vue实例文件中this.$router。router是VueRouter的实例对象,也是一个全局的路由对象,里面有很多的属性和方法,都可以直接用。
router.push(...)
3、获取路由参数
router.app._route则等价于vue实例文件中的this.$route。route是当前正在跳转的路由对象,可以从route里面获取hash,name ,path,query等属性
router.app._route.query router.app._route.params
附:vue项目中在外部js文件中获取当前页面的路由名route.name
首先我想先说明一下,在vue里面router和route的区别:
(1)route是当前正在跳转的路由对象,可以从route里面获取hash,name ,path,query,mathsr , fullPath等属性方法
(2) router是VueRouter的实例对象,也是一个全局的路由对象,里面有很多的属性和方法 ,比如:router.push,route.options等等。
但是在js文件中 我们不好直接使用this.$route来直接获取到当前的路由name, 主要是这个this指向问题,在这里我通过了router来获取
1、在js文件中引入router
import router from '@/router/index'
2、在router获取到route获取
let routerName = router.app._route.name;
总结
到此这篇关于Vue项目如何在js文件里获取路由参数及路由跳转的文章就介绍到这了,更多相关js获取路由参数及路由跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vueJs函数readonly与shallowReadonly使用对比详解
这篇文章主要为大家介绍了vueJs函数readonly与shallowReadonly使用对比详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-03-03vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
这篇文章主要介绍了vue axios 给生产环境和发布环境配置不同的接口地址,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧2018-05-05vue+axios+element ui 实现全局loading加载示例
今天小编就为大家分享一篇vue+axios+element ui 实现全局loading加载示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论