Vue-router入門
技術(shù)胖原文鏈接
vue-router是一個(gè)插件包，所以我們還是需要用npm來進(jìn)行安裝的辜限。打開命令行工具樱报，進(jìn)入你的項(xiàng)目目錄，輸入下面命令泻拦。
npm install vue-router --save-dev
importVuefrom'vue'//引入Vue
importRouterfrom'vue-router'//引入vue-router
importHellofrom'@/components/Hello'//引入根目錄下的Hello.vue組件
Vue.use(Router)//Vue全局使用Router
exportdefaultnewRouter({
? ??routes: [//配置路由襟锐，這里是個(gè)數(shù)組
? ??????{
? ??????????//每一個(gè)鏈接都是一個(gè)對(duì)象path:'/',
? ??????????//鏈接路徑name:'Hello',
? ??????????//路由名稱，component: Hello//對(duì)應(yīng)的組件模板
? ??????}?
?? ??]
})
**常用語法**
<router-link to="/">[顯示字段]</router-link>
<p>{{ $route.name}}</p>
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
{{$route.params.username}}
<router-view ></router-view>
<router-view name="left"></router-view>
{ path: '/', components: { default:Hello, left:Hi1, right:Hi2 } }
{ path:'/params/:newsId/:newsTitle', component:Params }
path:'/params/:newsId(\\d+)/:newsTitle',
{ path: '/hi1',component: Hi1,alias:'/jspang' } 別名
**切換效果 **
想讓路由有過渡動(dòng)畫娄柳，需要在<router-view>標(biāo)簽的外部添加<transition>標(biāo)簽寓辱，標(biāo)簽還需要一個(gè)name屬性。
<transition name="fade"> <router-view ></router-view> </transition>
** css過渡類名 **?
組件過渡過程中赤拒，會(huì)有四個(gè)CSS類名進(jìn)行切換秫筏，這四個(gè)類名與transition的name屬性有關(guān)，比如name=”fade”,會(huì)有如下四個(gè)CSS類名：
fade-enter:進(jìn)入過渡的開始狀態(tài)挎挖，元素被插入時(shí)生效这敬，只應(yīng)用一幀后立刻刪除。
fade-enter-active:進(jìn)入過渡的結(jié)束狀態(tài)蕉朵，元素被插入時(shí)就生效崔涂，在過渡過程完成后移除。
fade-leave:離開過渡的開始狀態(tài)始衅，元素被刪除時(shí)觸發(fā)冷蚂，只應(yīng)用一幀后立刻刪除。
fade-leave-active:離開過渡的結(jié)束狀態(tài)汛闸，元素被刪除時(shí)生效蝙茶，離開過渡完成后被刪除。
從上面四個(gè)類名可以看出诸老，fade-enter-active和fade-leave-active在整個(gè)進(jìn)入或離開過程中都有效隆夯，所以CSS的transition屬性在這兩個(gè)類下進(jìn)行設(shè)置。
**過渡模式mode**
in-out:新元素先進(jìn)入過渡别伏，完成之后當(dāng)前元素過渡離開吮廉。
out-in:當(dāng)前元素先進(jìn)行過渡離開，離開完成后新元素過渡進(jìn)入畸肆。
**mode的兩個(gè)值**
histroy:當(dāng)你使用?history?模式時(shí)宦芦，URL 就像正常的 url，例如?http://jsapng.com/lms/轴脐，也好看调卑！
hash:默認(rèn)’hash’值，但是hash看起來就像無意義的字符排列大咱，不太好看也不符合我們一般的網(wǎng)址瀏覽習(xí)慣恬涧。
**404頁面**
{ path:'*', component:Error }
** 路由配置文件中的鉤子函數(shù) **
我們可以直接在路由配置文件（/src/router/index.js）中寫鉤子函數(shù)。但是在路由文件中我們只能寫一個(gè)beforeEnter,就是在進(jìn)入此路由配置時(shí)碴巾。先來看一段具體的代碼：
{? //進(jìn)入路由
????????path:'/params/:newsId(\\d+)/:newsTitle',
????????component:Params,
????????beforeEnter:(to,from,next)=>{
????????????????console.log('我進(jìn)入了params模板');
????????????????console.log(to);
????????????????console.log(from);
????????????????next();? ?執(zhí)行跳轉(zhuǎn)
? ? ? ? ? ? ? ? next(false);? 不跳轉(zhuǎn)? ?
? ??????????????next({path：‘/’}); 跳轉(zhuǎn)到首頁
? ? ? ? }
},
? ??????三個(gè)參數(shù)：
????????????????to:路由將要跳轉(zhuǎn)的路徑信息溯捆，信息是包含在對(duì)像里邊的。
????????????????from:路徑跳轉(zhuǎn)前的路徑信息厦瓢，也是一個(gè)對(duì)象的形式提揍。
????????????????next:路由的控制參數(shù)啤月，常用的有next(true)和next(false)。
**模板路由狗子函數(shù)**
export default {
? name: 'params',
? data () {
? ? return {
? ? ? msg: 'params page'? ? }
? },
? beforeRouteEnter:(to,from,next)=>{
? ? console.log("準(zhǔn)備進(jìn)入路由模板");
? ? next();
? },
? beforeRouteLeave: (to,from,next)=> {
? ? console.log("準(zhǔn)備離開路由模板");
? ? next();
? }
}
**編程式導(dǎo)航**
?this.$router.go(-1) 和 this.$router.go(1)?
這兩個(gè)編程式導(dǎo)航的意思是后退和前進(jìn)劳跃，功能跟我們?yōu)g覽器上的后退和前進(jìn)按鈕一樣谎仲，這在業(yè)務(wù)邏輯中經(jīng)常用到。比如條件不滿足時(shí)刨仑，我們需要后退郑诺。
router.go(-1)代表著后退，我們可以讓我們的導(dǎo)航進(jìn)行后退杉武，并且我們的地址欄也是有所變化的辙诞。
router.go(1):代表著前進(jìn)，用法和后退一樣轻抱，我在這里就不重復(fù)碼字了（碼字辛苦希望大家理解）倘要。
this.$router.push(‘/xxx ‘)
這個(gè)編程式導(dǎo)航都作用就是跳轉(zhuǎn)，比如我們判斷用戶名和密碼正確時(shí)十拣，需要跳轉(zhuǎn)到用戶中心頁面或者首頁封拧，都用到這個(gè)編程的方法來操作路由。
this.$router.push傳遞參數(shù)有2種方式：
傳遞參數(shù) – this.$router.push({path: ’ 路由 ', query: {key: value}})
參數(shù)取值 – this.$route.query.key
使用這種方式夭问，傳遞參數(shù)會(huì)拼接在路由后面泽西，出現(xiàn)在地址欄.
傳遞參數(shù) – this.$router.push({name: ’ 路由的name ',?params: {key: value}})
參數(shù)取值 – this.$route.params.key
使用這種方式，參數(shù)不會(huì)拼接在路由后面缰趋，地址欄上看不到參數(shù)…
動(dòng)態(tài)路由也是傳遞params的捧杉，所以在 this.$router.push() 方法中 path不能和params一起使用，否則params將無效秘血。需要用name來指定頁面味抖。
