路由（vue-router） 現在的應用都流行SPA應用（single page application） 傳統的項目大多使用多頁面結構，需要切換內容的時候我們往往會進行單個HTML文件的跳轉，這個時候網路、性能影響，瀏覽器會出現不定時間的空白界面，用戶體驗不好 單頁面應用就是用戶通過某些操作地址欄 ...
路由（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` }
