路由跳轉(zhuǎn)的兩種方式
1. 聲明式導(dǎo)航
1. 使用router-link的to屬性進(jìn)行路由跳轉(zhuǎn) to的值是要跳轉(zhuǎn)到的那個路由
// 1.1 to后直接跟路由
<router-link to="/home">to home</router-link>
// 1.2 to后跟一個配置對象path屬性是要跳轉(zhuǎn)到的那個路由
<router-link :to="{ path: '/home' }">to home</router-link>
// 1.3 to后跟一個配置對象滑黔，使用命名路由的name進(jìn)行跳轉(zhuǎn)
<router-link :to="{ name: 'homeIndex' }">to home</router-link>
2. 查詢字符串形式 路由傳參 to的值是一個配置對象 以查詢字符串形式攜帶 url?id=123
// 2.1 以 url?id=123&name=zs的形式攜帶
<router-link :to="{ path: '/home?id=123' }">to home?id=123</router-link>
// 2.2 以query屬性進(jìn)行傳參
<router-link :to="{ path: '/home', query: { id: 123 } }">to home 以query攜帶</router-link>
// 2.3 以params進(jìn)行傳參 需要命名路由name
<router-link :to="{ name: 'userIndex', params: { id: 123 } }">to user 以params攜帶</router-link>
2. 編程式導(dǎo)航
1. 使用this.$router進(jìn)行跳轉(zhuǎn) $router可以訪問到路由的實例
this.$router.push('/home')
this.$router.push('/home?id=123')
this.$router.push({ path: '/home', query: { id: 123 } })
this.$router.push({ name: 'homeIndex', params: { id: 123 } })
2. $router實例的跳轉(zhuǎn)方法
push() 跳轉(zhuǎn)到指定的路由趁蕊，向history歷史中添加記錄目派，點(diǎn)擊返回，返回到來之前的路由英遭。
go(n) 向前前進(jìn) n 或 后退 n個路由 n可為負(fù)數(shù)
replace() 跳轉(zhuǎn)到指定的路由间护，但是不會在history中添加記錄，點(diǎn)擊返回挖诸，會跳轉(zhuǎn)到上上一個路由汁尺。
back() 后退
forward() 前進(jìn)
3. 參數(shù)的接收
// 1. 查詢字符串 url?id123 query
this.$route.query
m// 2. params
this.$route.params
注意:
以查詢字符串 query進(jìn)行傳遞的參數(shù)，刷新頁面税灌，數(shù)據(jù)依然存在均函。
以params傳遞的參數(shù)，刷新頁面就會丟失菱涤。
跳轉(zhuǎn)用$router
獲取參數(shù)用$route
