vue-router幾大坑

如今vue使用率很高，踩坑這就是很平常的了，使用了幾年坑都依然沒踩完，糾結呀

一、router.js配置要點

大家都知道vue 是組件化開發，頁面很多路由難免，

這里是路由配置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現在開始配置路由

這里配置了一個路由跳轉到子界面，並且帶一個參數過去，

這個頁面接收上一個頁面傳入的參數

看來很簡單是吧，就這樣就可以了？

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了

但是這個雖然不是undefined但是也不是我需要的參數呀，

3、當前路由對象指定錯誤

感覺很奇怪，於是把this.$route打印出來看看

看當前this.$route這個路由實例的name 是 SystemIndex，而 systemIndex 應該是父頁面路由的

name，上面使用this.$route 根據當前route實例來獲取參數自然沒有了

於是修改父頁面參數配置，將其name 指定到當前route 實例上去，如：

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

看如圖，再次在子頁面 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)