vue-router路由

vue路由對於單頁應用頗有用，可是小程序不支持，因此mpvue框架不支持。

vue-router是SPA（單頁應用）的路徑管理器。再通俗的說，vue-router就是咱們WebApp的連接路徑管理系統。

引入 Hi組件：咱們在router/index.js文件的上邊引入Hi組件

import Hi from '@/components/Hi'

增長路由配置：在router/index.js文件的routes[]數組中，新增長一個對象，代碼以下。
{ path:'/hi',
name:'Hi',
component:Hi
}

<router-link>標籤: <router-link to="/">[顯示字段]</router-link>
to：是咱們的導航路徑，要填寫的是你在router/index.js文件裏配置的path值，若是要導航到默認首頁，只須要寫成 to=」/」 ，
[顯示字段] ：就是咱們要顯示給用戶的導航名稱，好比首頁 新聞頁。
<router-link> 標籤中的to傳參
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
1
<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi頁面1</router-link>
這裏的to前邊是帶冒號的，而後後邊跟的是一個對象形勢的字符串.
name：就是咱們在路由配置文件中起的name值。
params：就是咱們要傳的參數，它也是對象形勢，在對象裏能夠傳遞多個值。
在模板裏(src/components/Hi1.vue)用$route.params.username進行接收.

 

vue-router配置子路由

把Hi.vue改爲一個通用的模板，加入<router-view>標籤，給子模板提供插入位置。

子路由的寫法是在原有的路由配置下加入children字段
children:[
{path:'/',component:xxx},
{path:'xx',component:Hi1},
]須要注意的是，在配置路由文件前，須要先用import引入Hi1和Hi2。

單頁面多路由區域操做

在src/App.vue里加上兩個<router-view>標籤。咱們用vue-cli創建了新的項目，並打開了src目錄下的App.vue文件，
在<router-view>下面新寫了兩行<router-view>標籤,並加入了些CSS樣式。
<router-view ></router-view>
<router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"></router-view>
<router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"></router-view>

index.js裏面：
export default new Router({
routes: [
{
path: '/',
components: {
default:Hello,
left:Hi1,
right:Hi2
}
}

 

<transition>標籤

想讓路由有過渡動畫，須要在<router-view>標籤的外部添加<transition>標籤，標籤還須要一個name屬性。

<transition name="fade">
<router-view ></router-view>
</transition>
<transition name="fade">
<router-view ></router-view>
</transition>

css過渡類名：

組件過渡過程當中，會有四個CSS類名進行切換，這四個類名與transition的name屬性有關，好比name=」fade」,會有以下四個CSS類名：

fade-enter:進入過渡的開始狀態，元素被插入時生效，只應用一幀後馬上刪除。
fade-enter-active:進入過渡的結束狀態，元素被插入時就生效，在過渡過程完成後移除。
fade-leave:離開過渡的開始狀態，元素被刪除時觸發，只應用一幀後馬上刪除。
fade-leave-active:離開過渡的結束狀態，元素被刪除時生效，離開過渡完成後被刪除。
從上面四個類名能夠看出，fade-enter-active和fade-leave-active在整個進入或離開過程當中都有效，
因此CSS的transition屬性在這兩個類下進行設置。

.fade-enter {
opacity:0;
}
.fade-leave{
opacity:1;
}
.fade-enter-active{
transition:opacity .5s;
}
.fade-leave-active{
opacity:0;
transition:opacity .5s;
}

過渡模式mode：

in-out:新元素先進入過渡，完成以後當前元素過渡離開。
out-in:當前元素先進行過渡離開，離開完成後新元素過渡進入。

 

路由配置文件中的鉤子函數
路由配置文件（/src/router/index.js）中寫鉤子函數。可是在路由文件中咱們只能寫一個beforeEnter,
{path:'/params/:newsId(\\d+)/:newsTitle',
component:Params,
beforeEnter:(to,from,next)=>{
next（）；}
三個參數：

to:路由將要跳轉的路徑信息，信息是包含在對像裏邊的。
from:路徑跳轉前的路徑信息，也是一個對象的形式。
next:路由的控制參數，經常使用的有next(true)和next(false)。

寫在模板中就能夠有兩個鉤子函數可使用：

beforeRouteEnter：在路由進入前的鉤子函數。beforeRouteLeave：在路由離開前的鉤子函數。 beforeRouteEnter:(to,from,next)=>{ console.log("準備進入路由模板"); next(); }, beforeRouteLeave: (to, from, next) => { console.log("準備離開路由模板"); next(); }