Vue2.0三——Vue-router

Cymiran發表於2017-12-06
Vue

我會從兩個方面來寫路由

自定義路由（以拉勾網為例）

路由指的是在不重新整理頁面的情況下更新頁面

通過：#hash，例如：10.0.164.8:8080/index.html/#main 
然後通過H5的history物件的history.pushState()+popState事件實現路由切換

實現步驟：
(1)在script檔案下建立路由表 routes.js

export default {
    `/` : `Position` 首頁
    `/search`: `Search`,
    `/mine` : `Mine`
}

（2）在app.js中匹配路徑

import routes form  `./routes`
//動態獲取元件
new Vue({
    el : `#root`,
    data:{
    //定義當前路徑資訊
      currentRoute: window.location.pathname   
    },
    computed : {    //生成子路由元件
        ViewComponent() {
            //根據路由找到匹配的元件名
            const MatchingView = routes[this.currentRoute];
            返回元件物件
            return MatchingView ？ require(`./page/${MatchingView}.vue`) ：require(`./page/404.vue`)
        }
    },
    //渲染元件
    render(h) {
        return h(this.ViewComponent)
    }
})

(3)在index.vue中的section放通過插槽存放porixtion mine search 元件

<section>
    <slot></slot> //插槽用來存放各個元件
</section>

(4)position.vue

import Index from `./Index.vue`
export default {
    //匯入Index元件
    data() {
        return{
            
        }
    },
    componets ： {
        Index //定義Index元件
    }
}

將template的內容外層用 <Index></Index>包(Index建個插槽)

(5)同理search也一樣

search.vue
import Index from `./Index.vue`
export default {
    //匯入Index元件
    data() {
        return{
            
        }
    },
    componets ： {
        Index //定義Index元件
    }
}

將template的內容外層用 <Index></Index>包

(6)點選連結切換元件

通過history提供的事件
window.addEventListener(`popstate`,function(){
    vm.currentRoute = window.location.pathname
},false)

(7)定義點選切換元件時的a標籤元件

VLink.vue 寫邏輯
    <template>
        <a :href=`href` class="{active：isActive}">
            <slot></slot>
            @click.prevent=`go`
        </a>
    </template>

    import routes from `../routes`
    export default {
        props : {               //物件型別
            href: {
                type ： String,
                required ： true
            }
        },
        computed: {
            isActive () {
            <!--判斷呼叫元件傳遞進來的href是否是當前路徑的href-->
                return this.href == this.$root.currentRoute
            }
        },
        methods:{
            go(){
               this.$rout.currentRoute = this.href
               window.history.pushState(null,routes[this.href],this.href)
            }
        }
    }

(8)通用元件，Vlink.vue 在index.vue中引入

import VLink form `../../vlink.vue`
在index.vue裡找到底部 ul li 用 v-link 標籤包住
<ul>
    <v-link href=`/`>
        <li>
        
        </li>
    </v-link>
    <v-link href=`/search`>
        <li>
        
        </li>
    </v-link>
    <v-link href=`/mine`>
        <li>
        
        </li>
    </v-link>
</ul>
通過a連結
    <template>
        <a>
            <slot></slot>
        </a>
    </template>
    

    Vue.component(`VLink`,{
        template
    })

vue-router

還是框架簡單 來來來

路由有三種導航鉤子：

  • 1 、全域性導航鉤子

    beforeEach
    beforeResolve
    afterEach

       每個鉤子方法接收三個引數：
   to: Route : 即將要進入的目標 [路由物件]
   from: Route : 當前導航正要離開的路由
   next: Function : 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next
   方法的呼叫引數。
   next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是confirmed （確認的）。
   next(false): 中斷當前的導航。
   如果瀏覽器的 URL 改變了（可能是使用者手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from
   路由對應的地址。
   next(`/`) 或者 next({ path: `/` }): 跳轉到一個不同的地址。當前的導航被中斷，然後進行一個新的導航。
   
   確保要呼叫 next方法，否則鉤子就不會被 resolved。

    例子：

       const router = new VueRouter({ ... })
   router.beforeEach((to, from, next) => {
       // do something 
       next();
   });
   
   router.afterEach((to, from, next) => {
       console.log(to.path);
   });
   
  原文連結：http://blog.csdn.net/sinat_17775997/article/details/68941078
  • 2 、某個路由獨享的導航鉤子

    beforeEnter

  • 3 、路由元件裡的導航鉤子

    beforeRouteEnter
    beforeRouteUpdate (2.2 新增)
    beforeRouteLeave
    例子：

    let fromPath = ``;
export default{
   beforeRouteEnter (to, from, next) {
        // 在渲染該元件的對應路由被 confirm 前呼叫
        // 不！能！獲取元件例項 `this`
        // 因為當鉤子執行前，元件例項還沒被建立
        fromPath = from.path;
        next();
   },
}

（1）安裝外掛 npm i vue-router -D

app.js引入：
import Vue from `vue`
import VueRouter from `vue-router`
import `../../app.scss`
import routes from `./routes`

Vue.use(VueRouter)

const routes = new VueRouter({
    routes
})
new Vue({
    el:`#root`,
    router
})

配置：
webpack.config.js,跟plugins同級
externals : {
    `vue` : `window.Vue`
    `vue-router`:`window.VueRouter`
}
會將第三方元件抽離出去
把node_modules/vue/dist/vue.min.js
/vue/dist/vue-router/vue-router.min.js
放到根目錄並在index.html中引入

這樣減小了app.js的大小

(2)定義

1、 scripts下建立routes.js

import Index frmm `./pages/Index.vue`
import Position from `./pages/Position.vue`
import Search from `./pages/Search.vue`
import Mine from `./pages/Mine.vue`

路由表：
export default [
    {
        path: `/`,
        componebt: `Index`,
        childern: [
            {
                path:`/position`,
                component : Position,
            },
            {
                path:`/search`,
                component : Search
            },
            {
                path:`/mine`,
                component : Mine
            },
        ]
    }
]

2.首頁 更改入口
    index.html
    <router-view></route-view>
    
    index.vue
    <router-view></route-view>
    
index.vue
import {routerLink} from `vue-router`
//宣告式跳轉
<router-link :to=`{name:`Detail`,params:{xid:123}}`>
    去詳情頁
</router-link> 
獲取：this.$route.params.xid
程式設計時跳轉
this.$router.history.push({name:`Detail`,params:{xid:123}})

相關文章