路由傳參：六種方法
<li v-for="article in articles" @click="getDescribe(article.id)">
<router-link to="/route/routeOne/參數(shù)">路由傳參</router-link>
1，router-link to = '/' 字符串傳參
通過router-link to傳值：:to="/route/${name}"(動態(tài)傳參)`
// 路由配置
path: '/route/:name'
// 在傳參的頁面中
<router-link :to="/route/${name}">路由傳參</router-link>
// 在接受傳參的頁面中
let name = this.$route.params.name
注：此方法傳參，頁面刷新數(shù)據(jù)不會丟失
2友浸，router-link to = {path,query} 通過對象path傳參
通過router-link to傳值：:to = {path:'route', query:{code:1}}
// 路由配置
path: '/route'
// 在傳參的頁面中
<router-link :to="{ path: '/route', query: { code: 1 } }">路由傳參</router-link>
// 在接受傳參的頁面中
let code= this.$route.query.code
注：查詢參數(shù)搭配query朝扼，頁面刷新數(shù)據(jù)不會丟失
3，router-link to = {name,params} 通過對象name傳參
通過router-link to傳值：:to = {name:'route', params:{code:1}}
// 路由配置
name: 'route'
// 在傳參的頁面中
<router-link :to="{ name: 'route', params: { code: 1 } }">路由傳參</router-link>
// 在接受傳參的頁面中
let code= this.$route.params.code
注：查詢參數(shù)搭配params，頁面刷新數(shù)據(jù)會丟失
點(diǎn)擊數(shù)據(jù)時，傳參數(shù)據(jù)不會實(shí)時更新，除非該組件被重新渲染
4论衍，路由配置傳參
1， 路由的配置：
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
2聚磺，要傳參的頁面中
methods：{
getDescribe(id) {
//直接調(diào)用$router.push 實(shí)現(xiàn)攜帶參數(shù)的跳轉(zhuǎn)
this.$router.push({
path: `/describe/${id}`,
})
}
- 在對應(yīng)的頁面接受 id 路由參數(shù)
let id =this.$route.params.id
命名路由搭配params坯台，刷新頁面參數(shù)不會丟失
5，通過路由 path query 來傳參瘫寝，路徑不需要配置
1蜒蕾，對應(yīng)路由配置：
{
path: '/describe',
name: 'Describe',
component: Describe
}
2，父組件：使用path來匹配路由焕阿，然后通過query來傳遞參數(shù)
這種情況下 query傳遞的參數(shù)會顯示在url后面?id=咪啡？
this.$router.push({
path: '/describe',
query: {
id: id
}
})
3，對應(yīng)子組件: 這樣來獲取參數(shù)
this.$route.query.id
命名路由搭配query暮屡，刷新頁面參數(shù)會丟失
附：路由的寫法：
@click="pushState('/four')"
pushState(route) {
this.$router.push(route);
}
6撤摸，通過屬性 name params來傳參
1，對應(yīng)路由配置:
注：這里可以添加:/id 也可以不添加褒纲，不添加數(shù)據(jù)會在url后面顯示准夷，并且數(shù)據(jù)就不會顯示
{
path: '/describe',
name: 'Describe',
component: Describe
}
2，父組件中：通過路由屬性中的name來確定匹配的路由莺掠，通過params來傳遞參數(shù)衫嵌。
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
3，子組件中: 這樣來獲取參數(shù)
let id = this.$route.params.id
命名路由搭配params彻秆，刷新頁面參數(shù)會丟失
點(diǎn)擊數(shù)據(jù)時渐扮，傳參數(shù)據(jù)不會實(shí)時更新论悴，除非該組件被重新渲染
但是掖棉，我們可以通過特殊方法墓律，刷新時候，還能獲取到傳過來的參數(shù)
// 對應(yīng)路由配置:
{
path: '/describe/:obj',
name: 'Describe',
component: Describe
}
// 父組件傳值
this.$router.push({
name: 'Describe',
params: {
obj: JSON.stringify({
id: id,
}),
}
})
// 子組件接受值
let id = JSON.parse(this.$route.params.obj).id
