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获取路由参数及路由跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！