vue-router路由使用
vue-router路由使用
現在的應用都流行SPA應用（single page application）
傳統的專案大多使用多頁面結構，需要切換內容的時候我們往往會進行單個html檔案的跳轉，這個時候受網路、效能影響，瀏覽器會出現不定時間的空白介面，使用者體驗不好。
單頁面應用就是使用者通過某些操作更改位址列url之後，動態的進行不同模板內容的無重新整理切換，使用者體驗好。
Vue中會使用官方提供的vue-router外掛來使用單頁面，**原理就是通過檢測位址列變化後將對應的路由元件進行切換（解除安裝和安裝）****
簡單路由實現
下載路由外掛：
cnpm install vue-router -S
-
引入vue-router，如果是在腳手架中，引入VueRouter之後，需要通過Vue.use來註冊外掛
src/router/index.js
// 引入router import Vue from 'vue' import Router from 'vue-router' // 檔案路徑 import Films from "@/views/Films" import Center from "@/views/Center" import Cinema from "@/views/Cinema" // 通過Vue.use方法來使用外掛 Vue.use(Router)
- 建立router路由器(簡寫)
new Router({
routes:[
{path:"/home",component:Home}
]
})
- 建立路由表並配置在路由器中
var routes = [ { path:"/films", //url位址列的路徑 component:Films, //根據url位址列的路徑所對映的路由檢視元件 }, { path:"/center", component:Center }, { path:"/cinema", component:Cinema }, ] new Router({ routes })
- 在根例項裡注入router,目的是為了讓所有的元件裡都能通過this.$router、this.$route來使用路由的相關功能api
src/main.js
import Vue from 'vue'
import App from './App.vue'
//引入router的例項
import router from "./router"
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router //目的？讓我們的元件上面可以訪問到路由相關的api($route/$router)
}).$mount('#app')
- 利用router-view來指定路由切換的位置
<router-view></router-view>
-
使用router-link來建立切換的工具，會渲染成a標籤，新增to屬性來設定要更改的path資訊，且會根據當前路由的變化為a標籤新增對應的router-link-active/router-link-exact-active（完全匹配成功）類名
src/APP.vue
元件支援使用者在具有路由功能的應用中（點選）導航。 通過 to 屬性指定目標地址，預設渲染成帶有正確連結的 標籤，可以通過配置 tag 屬性生成別的標籤.。另外，當目標路由成功啟用時，連結元素自動設定一個表示啟用的 CSS 類名。
<router-link tag="li" to="/films" active-class="active">電影</router-link>
<router-link tag="li" to="/cinema" active-class="active">影院</router-link>
<router-link tag="li" to="/center" active-class="active">我的</router-link>
.router-link-active{
color:red;
}
多級路由
在建立路由表的時候，可以為每一個路由物件建立children屬性，值為陣列，在這個裡面又可以配置一些路由物件來使用多級路由，注意：一級路由path前加'/'
const routes = [
{
path:"/films", //url位址列的路徑
component:Films, //根據url位址列的路徑所對映的路由檢視元件
children:[
{
name:'now',
path:"/films/nowplaying",
component:Nowplaying
},
{
path:"comingsoon",
component:ComingSoon
},
]
},
{
path:"/center",
component:Center
},
{
path:"/cinema",
component:Cinema
},
{
path:"/detail",
component:Detail
},
{
path:"/", //預設路由
redirect:"/films"
},
// {
// path:"*", //上述路由都沒有匹配上的話就進入，然後重定向到/films/nowplaying
// redirect:"/films"
// }
]
二級路由元件的切換位置依然由router-view來指定（指定在父級路由元件的模板中）
<router-link to='inside'>inside</router-link>
<router-link to='outside'>outside</router-link>
<router-view></router-view>
預設路由和重定向
當我們進入應用，預設像顯示某一個路由元件，或者當我們進入某一級路由元件的時候想預設顯示其某一個子路由元件，我們可以配置預設路由：
{path:'',component:Main}
當我們需要進入之後進行重定向到其他路由的時候，或者當url與路由表不匹配的時候：
{path:'/',redirect:'/main'}
///...放在最下面
{path:'*',redirect:'/main'},
命名路由
我們可以給路由物件配置name屬性，這樣的話，我們在跳轉的時候直接寫name:main就會快速的找到此name屬性對應的路由，不需要寫大量的urlpath路徑了
<template>
<ul>
<router-link
v-for="nav in navList"
:key="nav.id"
:to="nav.path"
tag="li"
active-class="active"
>{{nav.title}}</router-link>
</ul>
</template>
navList:[
{id:1,title:"電影",path:"/films"},
{id:2,title:"影院",path:"/cinema"},
{id:3,title:"個人中心",path:"/center"}
]
宣告式導航 router-link
router-link的to屬性，預設寫的是path（路由的路徑），可以通過設定一個物件，來匹配更多
:to='{name:"detail",params:{id:_new.id},query:{content:_new.content}}'
name是要跳轉的路由的名字，也可以寫path來指定路徑，但是用path的時候就不能使用params傳參，params是傳路由引數，query傳queryString引數
replace屬性可以控制router-link的跳轉不被記錄
active-class屬性可以控制路徑切換的時候對應的router-link渲染的dom新增的類名
程式設計式導航
有的時候需要在跳轉前進行一些動作，router-link直接跳轉，需要在方法裡使用$router的方法
this.$router.push()
toDetail(){
//通過程式設計式導航跳轉 (push/go/back/replace等方法實現路由跳轉)
this.$router.push("/detail")
}