vue-router几大坑

小灰灰 2023-02-10 01:20 41阅读 0赞

> 如今vue使用率很高，踩坑这就是很平常的了，使用了几年坑都依然没踩完，纠结呀

## 一、router.js配置要点 ##

大家都知道vue 是组件化开发，页面很多路由难免，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]  
这里是路由配置router.js

最外层是 new Router创建router 实例，该实例里面是多个route配置

注意：这里实例是一个 **Router** 而 其中参数是**routes**千万别写成**routers**了

## 二、params与query ##

参数传递，可以使用params和query的方式进行参数传递  
需要注意的是

1.  router为VueRouter实例，想要导航到不同URL，则使用router.push方法
2.  $route为当前router跳转对象，里面可以获取name、path、query、params等

### 1、使用 params进行参数传递 ###

OK现在开始配置路由  
![在这里插入图片描述][20200519170446400.png]  
这里配置了一个路由跳转到子界面，并且带一个参数过去，

![在这里插入图片描述][20200519170636851.png]  
这个页面接收上一个页面传入的参数

看来很简单是吧，就这样就可以了？

no这个并没像想象的那么简单，这个`getParams`打印出来是一个`undefined`当时就觉得奇怪了，为什么会无法把参数传递过来呢！

### 2、name 与path使用场景 ###

看来一圈原来是

params传参，push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！

于是修改参数传递

console.log('修改完成')
    	this.$router.push({ name: 'systemManage', params:{  keepActive: 'userManage' }})
    	}

同时修改接收参数的方法

created(){ 
    	// 获取操作后的参数
    	const getParams = this.$route.params
    	console.log(getParams)

看这里接收后的参数不再是undefined了  
![在这里插入图片描述][20200519172001255.png]

但是这个虽然不是undefined但是也不是我需要的参数呀，

### 3、当前路由对象指定错误 ###

感觉很奇怪，于是把`this.$route`打印出来看看

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 1]

看当前`this.$route`这个路由实例的name 是 `SystemIndex`，而 `systemIndex` 应该是父页面路由的

name，上面使用`this.$route` 根据当前route实例来获取参数自然没有了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 2]

于是修改父页面参数配置，将其name 指定到当前route 实例上去，如：

console.log('修改完成')
    	this.$router.push({ name: 'SystermIndex', params: { id: 'userManage' }})
    	}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 3]  
看如图，再次在子页面 console 发现params 中已经有父页面传过来的参数了，证明这已经ok

【**总结**】：路由使用 `this.$router({name: 路由名称, params: {参数key: 参数值 }})`进行页面跳

转参数传递，子页面使用 `this.$route.params` 进行参数获取。

### 4、使用query进行参数传递 ###

有了上面坑的经历，这里使用query就很轻松了

query直接使用 path 就行了

console.log('修改完成')
    	this.$router.push({ this.$route.meta.activeMenu, query: { id: 'userManage' }})
    	}

获取参数

created(){ 
    	// 获取操作后的参数
    	const getParams = this.$route.query
    	console.log(getParams)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200519164333337.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70
[20200519170446400.png]: https://img-blog.csdnimg.cn/20200519170446400.png
[20200519170636851.png]: https://img-blog.csdnimg.cn/20200519170636851.png
[20200519172001255.png]: https://img-blog.csdnimg.cn/20200519172001255.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200519172244503.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200519172425413.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200519172500854.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70