vue-router路由知識補充

一、render函數

var app = new Vue({ el: '#app', router, render: h => h(App) //新添加的函數操做 })

　　咱們新加了render: h => h(App) 一開始我沒看懂，直接註釋運行看下，結果<div id="app"></div> 這個容器裏面就啥也沒有渲染出來。我也不怎麼理解，若是有大牛清楚的懇請留言指導一下啊。可是我仍是查了一下資料

　　官方文檔說明1：

render: function (createElement) { return createElement( 'h' + this.level, // tag name 標籤名稱 this.$slots.default // 子組件中的陣列  ) }

　　官方文檔說明2：

　　render ，類型：Function

　　詳細：字符串模板的代替方案，容許你發揮 JavaScript 最大的編程能力。render 函數接收一個 createElement 方法做爲第一個參數用來建立 VNode。（我是這麼理解的，咱們的路由跳轉時，定位到了一個組件進行渲染，可是以前app這個容器裏面是有其餘組件的，咱們不能直接添加進去，只能把app裏面的模板文件替換掉，因此用這個字符串模板的代替方案render（不知道對不對，真心請大神指出，你們這裏略過吧））

二、懶加載

　　懶加載的必要性：

　　（1）解決樣式衝突問題

　　（2）解決頁面資源加載問題

　　（3）路由被訪問時才加載對應組件，提升應用加載效率

　　具體代碼寫法：關鍵咱們要作的就是把以前普通import進來的組件定義成異步組件。

//前 import home form "./components/home" import login form "./components/login" //後 const home = resolve => require(['./home.vue'], resolve) const login = resolve => require(['./login.vue'], resolve)

三、路由構造配置

const router = new VueRouter({ mode: 'history',//history: 依賴 HTML5 History API 和服務器配置。 base: __dirname, linkActiveClass:'link-active', scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } } routes }) 

　　mode ：默認’hash’值，可是hash看起來就像無心義的字符排列，不太好看也不符合咱們通常的網址瀏覽習慣。

　　當你使用 history 模式時，URL 就像正常的 url，沒有 # 號了

　　base ：默認值: 「/」，應用的基路徑，通常就是項目的根目錄，webpack中有配置好。

var projectRoot = path.resolve(__dirname, '../')

　　linkActiveClass ：默認值: 「router-link-active」，就是當前組件被激活，相應路由會自動添加類」router-link-active」，這裏是爲了全局設置激活類名，若是不設置，直接用默認的也是能夠的。

　　scrollBehavior ：經過這個這個屬性（是個函數），可讓應用像瀏覽器的原生表現那樣，在按下 後退/前進 按鈕時，簡單地讓頁面滾動到頂部或原來的位置。

四、router-link的其餘表現形式

　　有時候咱們會這樣去寫，可是發現多了一個層級，而Vue提供了很好的方案。

<li> <router-link to="/mine"> <i class="icon-nav icon-nav5"></i><span>個人</span> </router-link> </li> <router-link to="/mine" tag="li"> //tag指定標籤名 <i class="icon-nav icon-nav5"></i><span>個人</span> </router-link> //渲染結果 <li> <i class="icon-nav icon-nav5"></i> <span>個人</span> </li>

五、當前路由添加激活狀態

　　地址欄變化的同時，對應組件也要相應的切換狀態，這是由於vue-router提供了這樣的機制，即當前路由激活時，自動添加類名，默認router-link-active ，在建立vue-router實例的時候給他設置全局配置，修改默認添加類名。

　　能夠直接用默認類名，那接下來就是寫CSS（less）樣式了

linkActiveClass:'link-active'

.router-link-active{ .icon-nav5 { background-image: url('../assets/img/icon-nav5a@3x.png'); } color: #e5321e; }

　　不過這裏會遇到一個問題，就是當出現嵌套路由時，會出現激活污染。 舉個例子，若是當前的路徑是 /a 開頭的，那麼 <router-link to="/a"> 也會被設置 CSS 類名。 一樣的，按照這個規則，<router-link to="/"> 將會被各個路由激活！這時咱們須要使用 exact 屬性來解決這種狀況。

 <!-- 這個連接只會在地址爲 / 的時候被激活 --> <router-link to="/" exact>

六、路由跳轉時添加過渡動效

　　這個功能也是經過vue-router切換時，自動添加了類名實現的。路由之間的切換添加一點動效效果會很不錯的。 這裏咱們在App組件的路由出口上添加動效就行了，由於全部的組件都渲染在這裏，這樣咱們就能夠給全部的路由切換添加動效。

<template> <div id="app"> <transition name="fade"> <router-view></router-view> </transition> </div> </template>

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

　　過渡的css類名：

　　v-enter: 定義進入過渡的開始狀態。在元素被插入時生效，在下一個幀移除。

　　v-enter-active: 定義進入過渡的結束狀態。在元素被插入時生效，在 transition/animation 完成以後移除。

　　v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時生效，在下一個幀移除。

　　v-leave-active: 定義離開過渡的結束狀態。在離開過渡被觸發時生效，在 transition/animation 完成以後移除。

　　要想添加更多的動畫效果，你們能夠看文檔和自由發揮了，也能夠添加其餘動畫庫。

七、命名路由

　　在路由實例建立的時候，咱們會給每一個路由地址添加一個name屬性，這樣在路由嵌套的時候，就不用寫很長的路由地址，只須要寫個name就好了。

routes: [ { path: '/login/loginWx', name: 'loginWx', component: function(reslove){ return require(['./components/login/loginWx'],reslove) } } ] //命名的路由 <router-link :to="{ name: 'loginWx', params: { userId: 123 }}">User</router-link>

八、經過注入路由器，咱們能夠在任何組件內經過 this.$router 訪問路由器，也能夠經過 this.$route 訪問當前路由：注意差異

export default { computed: { username () { return this.$route.params.username } }, methods: { goBack () { window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/') } } }