Vue 的路由

後端路由 -> 路由 -> （地址->/add / /2.html）

通過地址告訴後端要幹什麼。

後端路由的問題：

　　1.切換頁面的時候是跳全域性重新整理頁面（使用者體驗極差）

　　2.A頁面的靜態資源和B頁面的靜態資源會重複請求 這就是伺服器渲染->SSR。利於爬蟲搜尋（SEO優化），對伺服器的壓力大，建議用於首頁渲染，別的還是走ajax

前端路由：（vue的路由）

　　/ -> index

　　/2.html -> 2.html

通過不同的路由切換，幹不同的事或者切換不同的頁面

優勢：

　　使用者所有的操作都在一個頁面完成，單頁應用（spa）。 既然是一個頁面，共享資源只需要請求一次即可

vue路由安裝兩種方式：

　　　　第一種：vue create app（自動配）

　　　　第二種：(自己配)

　　　　　　1)安裝 npm install vue-router

　　　　　　2)引包 import Vue from 'vue'

　　　　　　　　    import VueRouter from 'vue-router'

　　　　　　3)使用 Vue.use(VueRouter)

　　　　　　4)配置 

const routes = [
    {
        path:'/',
        component:元件
    },
    {
        path:
 
'/',
        component:元件
    }
]
new Vuerouter({
    routes
});

　　　　　　5)放到根下 

new Vue({
    el:'#app',
    render:()=>h,
    routes
})

　　　　　　6)渲染 <router-view></router-view>

　　（hash路由-> #/... 不會重新整理頁面）

　　（history路由 /... 長的和後端路由一樣的`前端路由`，同樣不會重新整理頁面）

子路由：

　　如果有子路由，在原路由上掛一個children屬性，children為一個數組，陣列下又包一些物件，物件的path不要加 ' / '

{
    path:'/',
    component:app,
    children:[
        {
            path:'a',
            component:aaa
        }
    ]
}

　　有子級路由，那麼記得在父級身上加上< router-view>< /router-view> 此時元件就會在父級的元件上顯示。不管多少層都遵循這個規律。

　　解決啟用狀態切換時加不了事件的問題：使用.native

　　　　比如：@click.`native`="xxx(..)"

　　如果要在重新整理頁面的時候通過路由的資訊來操作資料，可以在created下使用this.$route這個的屬性

　　this.$route 存著一些與路由相關的資訊 常用的：