路由（vue-router）
現在的應用都流行SPA應用（single page application）
傳統的項目大多使用多頁面結構，需要切換內容的時候我們往往會進行單個HTML文件的跳轉，這個時候網絡、性能影響，瀏覽器會出現不定時間的空白界面，用戶體驗不好
單頁面應用就是用戶通過某些操作地址欄url之后，動態的進行不同模板內容的無刷新切換，用戶體驗好。
Vue中會使用官方提供的vue-router插件來使用單頁面，原理就是通過檢測地址欄變化后對應的路由組件進行切換（卸載和安裝）
簡單路由實現
cnpm install vue-router -S or yarn add vue-router
在Vue中，$router指向的是大路由，routes是路由配置數組， $route指向的是當前活躍的路由。
1.引入vue-router,如果是在腳手架中，引入VueRouter之后，需要通過Vue.use來注冊插件
router/index.js文件
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
2.創建router路由器
new Router({
routes:[
{path:"/home",component:Home}
]
})
3.創建路由表並配置在路由器中
var routes =[
{path,component}//path為路徑，component為路勁對應的路由組件
]
var router = new Router({
routes
})
export default router
4.在根實例里注入router,目的是為了讓所有的組件里都能通過this.$router、this.$route來使用路由的相關功能api
import router from "./router"
new Vue({
el:"#app",
router, //注冊一下 讓組件可以通過this.$router or this.$route 使用路由相關的api屬性或方法
template:"<App/>",
components:{App}
})
5. 利用router-view來指定路由切換的位置
6. 時候router-link來創建切換的工具，會渲染成a標簽，添加to屬性來設置更改的path信息，且會根據當前路由的變化為a標簽添加對應的router-link-active/router-link-exact-active(完全匹配成功)類名
<router-link to="/main">main</router-link>
<router-link to="/news">news</router-link>
.router-link-active{
color:red;
}
路由的懶加載
懶加載也叫延遲加載，即在需要的時候進行加載，隨用隨載。在單頁應用中，如果沒有應用懶加載，運用webpack打包后的文件將會異常的大，造成進入首頁時，需要加載的內容過多，延時過長，不利於用戶體驗，而運用懶加載則可以將頁面進行划分，需要的時候加載頁面，可以有效的分擔首頁所承擔的加載壓力，堅守首頁加載用時。
非按需加載則會把所有的路由組件塊的js打包在一起。當業務包很大的時候建議用路由的按需加載（懶加載）。
按需加載會在頁面第一次請求的時候，把相關路由組件塊的js添加上：
{
path:'/about',
name:'about',
component:()=>import('@/views/About') //采用了路由懶加載方式
}
多級路由
在創建路由表的時候，可以為每一個路由對象創建children屬性，值為數組，在這個里面又可以配置一些路由對象來使用多極路由，注意：一級路由path前加“/"
const routes =[
{path:"/main",component:AppMain},
{path:"/news",component:AppNews,children:[
{path:'inside',component:AppNewsInside},
{path:'outside',component:AppNewsOutside}
]},
]
二級路由組件的切換位置依然由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屬性對應的路由，不需要寫大量的url path路徑了
<router-link
v-for="nav in navs"
:key="nav.id"
:to="{name:nav.name}"
>
{{nav.title}}</router-link>
//router/index.js的配置
var router= new VueRouter({
routes:[
{
path:"xxx",
component:xxx,
children:[
{path:"guonei",component:()=>import("@/views/Guonei"),name:"guonei"},
{path:"guoji",component:()=>import("@/views/guoji"),name:"guoji"},
]
}
]
})
<script>
export default {
data(){
return {
navs:[
{id:1,title:"國內新聞",name:'guonei'},
{id:2,title:"國際新聞",name:'guoji'}
]
}
}
}
</script>
動態路由匹配
有時候我們需要在路由跳轉的時候跟上參數，路由傳參的參數主要有兩種：路由參數、queryString參數。
路由參數需要在路由表里設置
{path:'/user/:id',component:User}
上面的代碼就是給User路由配置接收id的參數，多個參數繼續在后面設置
在組件中可以通過this.$route.params來使用
queryString參數不需要在路由表設置接收，直接設置 ？ 后面的內容，在路由組件中通過this.$route.query接收
<div class="nowplaying">
正在熱映...
<!-- <ul>
<li
v-for="data in datalist"
:key="data"
@click="toDetail(data)"
>{{data}}</li>
</ul> -->
<!-- <ul>
<router-link
v-for="data in datalist"
:key="data"
:to="'/detail/'+data+'?title=文章一'"
tag="li"
>
{{data}}
</router-link>
</ul> -->
<ul>
<router-link
v-for="data in datalist"
:key="data"
:to="{
name:'detail',
params:{id:data},
query:{title:'文章二'}
}"
tag="li"
>
{{data}}
</router-link>
</div>
<script>
data(){
return{
datalist:['11','22','33']
}
}
</script>
router.js
{
name:"detail",
path:"/detail/:id",
component:Detail
}
prop將路由與組件解耦
在組件中接收路由參數需要this.$route.params.id代碼冗余，現在可以在路由表里配置props:true
{path:'detail/:id',component:AppNewsDetail,name:'detail',props:true}
在路由自己中可以通過props接收id參數去使用了
props:['id']
聲明式導航router-link
<router-link>組件支持用戶在具有路由功能的應用中（點擊）導航。通過to屬性指定目標地址，默認渲染成帶有超鏈接的<a>標簽，可以通過配置tag屬性生成別的標簽。另外，當目標路由成功激活時，鏈接元素自動設置一個表激活的css類名。
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()
#### 路由模式
為了構建SPA（單頁面應用），需要引入前端路由系統，這也就是Vue-router存在的意義。前端路由的核心，就在於---改變視圖的同時不會向后端發出請求。
路由有兩種模式：hash、history,默認會使用hash模式，但是如果url里面不想出現丑陋hash值，在new VueRouter的時候配置mode值為history來改變路由模式，本質使用H5的history.pushState方法來更改url，不會引起刷新。
history模式，會出現404的情況，需要后台配置
因為我們的應用是個單頁客戶端應用，如果后台沒有正確的配置當用戶瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就不好看了。
所以要在服務端增加一個覆蓋所有情況的候選資源：如果URL匹配不到任何靜態資源，則應該返回同一個index.html頁面，這個頁面就是你app的依賴頁面
路由原理：
hash路由 ====> window.onhashchange監聽路徑的切換
history路由 ====> window.onpopstate監聽路徑的切換
#### 路由守衛
在某些情況下，當路由跳轉前或跳轉后、進入、離開某一個路由前、后，需要做某些操作，就可以使用路由鈎子來監聽路由的變換
全局路由鈎子
//進入到某個路由組件之前
router.beforeEach((to,from,next)=>{
//會在任意路由跳轉前執行，next一定要記着執行，不然路由不能跳轉了
console.log('beforeEach')
console.log(to,from)
next()
})
//進入到某個路由組件之后
router.afterEach((to,from)=>{
//會在任意路由跳轉后執行
console.log('afterEach')
})
單個路由鈎子：
只有beforeEnter,在進入前執行，to參數就是當前路由
routes:[
{
path:'/foo',
component:Foo,
//當進入到foo路由之前，就會觸發
beforeEnter:(to,from,next)=>{
//...
next()//必須執行next之后，對應的Foo組件才可以正常顯示出來
}
}
]
路由組件鈎子：
//進入到某個組件之前的攔截，獲取不到組件內部的this
beforeRouteEnter(to,from,next){
//在渲染該組件的對應路由被 confirm前調用
//不能獲取組件實例`this`
//因為當守衛執行前，組件實例還沒有被創建
},
beforeRouteUpdate(to,from,next){
//在當前路由改變，但是該組件被復用時調用
//舉例來說，對於一個帶有動態參數的路徑/foo/:id,在/foo/1和/foo/2之間跳轉的時候，
//由於會渲染同樣的Foo組件，因此組件實例會被復用，而這個鈎子就會在這個情況下被調用。
//可以訪問組件實例`this`
},
//離開某個組件前的攔截，獲取到組件內部的this
beforeRouteLeave(to,from,next){
//導航離開該組件的對應路由時調用
//可以訪問實例`this`
}