安裝vue-router
npm install vue-router --save-dev
路由配置文件src/router/index.js?
引入組件 improt 組件名 from '相對(duì)路徑'
增加路由配置?
{
????path:'路徑（和router-link to后面的一致）'
? ? name:'組件名'（可有無(wú)）????
? ? componet :引入時(shí)的組件名
}
APP.vue 文件中加入router-link to=“path的路徑”，點(diǎn)擊就會(huì)跳轉(zhuǎn)到那個(gè)頁(yè)面
子路由的寫法
不要忘記import 組件
主路由下的componet 變成componets:[
{path:'主路由路徑',componet:主路由組件}，
{path:'子路由路徑1‘,componet:子路由組件1}，
{path:'子路由路徑2',componet:子路由組件2}，
]
路由傳參
name傳參 路由配置中的name 可以在該組件中庸$route.name獲得
通過(guò)router-link to傳參
to前面需要加：。
后面跟的事一個(gè)對(duì)象形式的字符串
：to="{name:xxx,params:{key:value}}"
name就是配置文件中的name值
params就是我們要傳的參數(shù) 可以是多個(gè)值
通過(guò)$route.params.key來(lái)獲取
單頁(yè)面多路由區(qū)域
一個(gè)頁(yè)面有多個(gè)router-view 區(qū)域
router-view中定義好name
路由配置文件中
path:路徑
componets:{
default:組件名，
定義好的name:組件名1，
定義好的name:組件名2，
}
App.vue 配置好router-link
可以實(shí)現(xiàn)單頁(yè)面多個(gè)路由區(qū)域
路由傳參
路由配置文件中
冒號(hào)的形式傳參
path:'/home/:id/:userName'
router-link 中 to="/home/2565/name" 可以直接傳參
$route.params.id可以獲取參數(shù)
正則在url中可以規(guī)定參數(shù)的格式
path:'/home/:id(\\d+)/:userName'
規(guī)定id只能是數(shù)字
路由重定向
path:'和to一致的路徑點(diǎn)擊后url會(huì)有變化'，
redirect:'已經(jīng)引入和配置的組件路徑'
以上path的url會(huì)指向redirect的頁(yè)面
重定向傳參一樣的在url中冒號(hào)的形式
別名
alias
path:'url',（path為/時(shí)別名不起作用）
componet:'組件頁(yè)面'
alias:'/holly'
點(diǎn)擊跳轉(zhuǎn)到holly路徑 還是顯示path路徑的那個(gè)頁(yè)面
重定向和別名的區(qū)別
重定向沒(méi)變化
別名url有變化
404頁(yè)面
path:'*'
componet:Error
路徑錯(cuò)誤時(shí)會(huì)進(jìn)入Error組件頁(yè)面
前進(jìn)后退?
this.$router.go(1) 和 this.$router.go(-1)
放在methods中的函數(shù)里 然后@click=該函數(shù)名
