Vue學習之旅Part16：Vue結合webpack使用vue-router實現路由和子路由

一、使用vue-router實現路由

由於是通過vue-router實現的路由 因此 須先安裝vue-router：

輸入cnpm i vue-router -S以安裝vue-router包

然後 在main.js裏導包：

導入VueRouter的包之前 必須先導入Vue的包：

import Vue from "vue"
import VueRouter from "vue-router"

然後手動調用Vue.use()方法 將vue-router安裝到Vue上：

Vue.use(VueRouter)

創建路由對象VueRouter：

// 導入account組件
import account from "./main/Account.vue"
// 導入goodslist組件
import goodslist from "./main/GoodsList.vue"

var router=new VueRouter({
    routes:[
        // 定義路由規則
        {path:"/account",component:account},
        {path:"/goodslist",component:goodslist}
    ]
})

將路由對象掛載到Vue實例上：

var vm=new Vue({
    el:"#app",
    render:create=>create(app),
    // 掛載路由對象
    router
})

展示在頁面上：

注：因爲render會將el屬性指定的容器裏面的所有內容全部都清空覆蓋
因此 不能將路由的<router-view>和<router-link>標籤直接寫到el屬性所控制的元素中 否則是不會顯示的

因此 可以將路由的<router-view>和<router-link>標籤寫到App.vue組件裏
這樣 當app組件展示出來時 就必然能看到路由的內容了

App.vue：

<template>
    <div>
        <h1>This is App component</h1>

        <router-link to="/account">account</router-link>
        <router-link to="/goodslist">goodslist</router-link>

        <router-view></router-view>
    </div>
</template>

<script>
export default {
    
}
</script>

<style>

</style>

在上面的案例中：
App.vue組件是通過vm實例的render函數渲染出來的
render函數若要渲染組件 則渲染出的組件只能放到el屬性所指定的元素中去

而Account和GoodsList組件是通過路由匹配監聽到的 因此這兩個組件只能展示到路由的<router-view>標籤裏

---

二、使用vue-router實現子路由

導入子組件：

main.js：

import login from "./subcomponent/login.vue"
import register from "./subcomponent/register.vue"

配置路由對象：

var router=new VueRouter(
{
    routes:[
        // 定義路由規則
        {
            path:"/account",
            component:account,
            // 子路由(path前面不帶斜槓)
            children:[
                {path:"login",component:login},
                {path:"register",component:register}
            ]
        },
        {path:"/goodslist",component:goodslist}
    ]
})

在父組件的內部HTML代碼區定義子組件：

Account.vue：

<template>
    <div>
        <h1>This is Account component</h1>

        <router-link to="/account/login">login</router-link>
        <router-link to="/account/register">register</router-link>

        <!-- 子組件 -->
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    
}
</script>

<style>

</style>

三、抽離路由模塊

導入組件和創建路由對象的代碼過於冗長 可進行抽取 使代碼更加簡潔

抽離前：

main.js：

// 導入Vue
import Vue from "vue"
// 導入VueRouter路由
import VueRouter from "vue-router"
// 手動安裝vue-router
Vue.use(VueRouter)

// 導入app組件
import app from "./App.vue"

// 導入account組件
import account from "./main/Account.vue"
// 導入goodslist組件
import goodslist from "./main/GoodsList.vue"

// 導入account的子組件
import login from "./subcomponent/login.vue"
import register from "./subcomponent/register.vue"

// 創建路由對象
var router=new VueRouter(
{
    routes:[
        // 定義路由規則
        {
            path:"/account",
            component:account,
            // 子路由(path前面不帶斜槓)
            children:[
                {path:"login",component:login},
                {path:"register",component:register}
            ]
        },
        {path:"/goodslist",component:goodslist}
    ]
})

var vm=new Vue({
    el:"#app",
    render:create=>create(app),
    // 掛載路由對象
    router
})

抽離後：

分成了兩個js文件 router.js文件專門用於存放路由相關的代碼
然後再在main.js裏導入router.js暴露的路由模塊即可

router.js：

// 導入VueRouter路由
import VueRouter from "vue-router"

// 導入account組件
import account from "./main/Account.vue"
// 導入goodslist組件
import goodslist from "./main/GoodsList.vue"

// 導入account的子組件
import login from "./subcomponent/login.vue"
import register from "./subcomponent/register.vue"

// 創建路由對象
var router=new VueRouter(
{
    routes:[
        // 定義路由規則
        {
            path:"/account",
            component:account,
            // 子路由(path前面不帶斜槓)
            children:[
                {path:"login",component:login},
                {path:"register",component:register}
            ]
        },
        {path:"/goodslist",component:goodslist}
    ]
})

// 將路由對象暴露出去
export default router;

main.js：

// 導入Vue
import Vue from "vue"
// 導入VueRouter路由
import VueRouter from "vue-router"
// 手動安裝vue-router
Vue.use(VueRouter)

// 導入app組件
import app from "./App.vue"

// 導入自定義的路由模塊
import router from "./router.js"

var vm=new Vue({
    el:"#app",
    render:create=>create(app),
    // 掛載路由對象
    router
})

---