61.Vue 結合webpack使用vue-router

需求

在前面的篇章，我們已經使用export default以及render函數完成的vue框架在webpack中的組件基本使用方式。

可以繼續往下看看，在 vm 中只能使用 render 來渲染一個組件，如果有更多需要的組件，該如何去集成處理呢？

方法當然是有的。

我們可以給vm提供渲染一個app的組件，然後在app的組件就可以繼續持續渲染其他組件了。

本次示例還會集成使用vue-router在webpack中的使用方式來演示。

構建APP組件

1.首先初始化基礎的文檔機構，創建app.vue文件

<template>
    <div>
        <h1>這是App組件</h1>
    </div>
</template>

<script>

    export default {
        data(){
            return {}
        },
    }

</script>

<style>

</style>

2.在main.js中導入app組件，使用render進行渲染

// 導入vue
import Vue from 'vue'

// 導入app組件
import app from './app.vue'

// 創建vm
var vm = new Vue({
    el: '#app',
    // 使用render函數渲染app組件
    render: c => c(app)
});

好了，下面在瀏覽器看看 vue 的渲染效果，如下：

安裝vue-router

首先到官網看看vue-router的安裝介紹，如下：

https://router.vuejs.org/zh/

1.查看官網的安裝

https://router.vuejs.org/zh/installation.html

NPM

npm install vue-router -S

如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

2.安裝vue-router

執行vue-router如下：

3.配置使用vue-router

// 導入vue-router
import VueRouter from 'vue-router'

// 手動創建使用VueRouter
Vue.use(VueRouter);

4.創建路由對象

// 創建路由對象
var router = new VueRouter({
    routes: [
        // .. 路由組件
    ]
});

創建組件用於路由映射

1.創建兩個組件，提供路由映射：account組件、goodslist組件

account.vue 代碼如下：

<template>
    <h1>這是account組件</h1>
</template>

<script>
    export default {
        name: "account"
    }
</script>

<style scoped>

</style>

goodslist.vue 代碼如下：

<template>
    <h1>這是goodslist組件</h1>
</template>

<script>
    export default {
        name: "goodslist"
    }
</script>

<style scoped>

</style>

2.在main.js 導入 account、goodslist組件

// 導入account以及goodslist組件
import account from './main/account.vue'
import goodslist from './main/goodslist.vue'

3.配置路由規則

// 創建路由對象
var router = new VueRouter({
    routes: [
        // 路由規則
        { path: '/account', component: account },
        { path: '/goodslist', component: goodslist }
    ]
});

好了，配置完畢路由之後，下一步就在app組件中應用。

4.在app組件中應用組件

<template>
    <div>
        <h1>這是App組件</h1>

        <!-- 設置跳轉路由 -->
        <router-link to="/account">Account</router-link>
        <router-link to="/goodslist">Goodslist</router-link>

        <!-- 設置路由映射組件 -->
        <router-view></router-view>

    </div>
</template>

<script>

    export default {
        data(){
            return {}
        },
    }

</script>

<style>

</style>

5.在瀏覽器中查看路由映射組件效果

運行npm run dev啓動服務，如下：

可以看到跳至不同的路由，則映射出了不同的組件。

實現children子路由

下面在創建多兩個子組件，放在Account組件之下，例如：register註冊、login登錄組件。

然後使用children子路由進行映射。

1.創建register註冊、login登錄組件

login.vue 代碼如下：

<template>
    <div>
        <h1>這是login登錄組件</h1>
    </div>
</template>

<script>
    export default {
        name: "login"
    }
</script>

<style scoped>

</style>

register.vue 代碼如下：

<template>
    <div>
        <h1>這是register註冊的組件</h1>
    </div>
</template>

<script>
    export default {
        name: "register"
    }
</script>

<style scoped>

</style>

2.在main.js導入 register、login 組件

// 導入account的兩個子組件
import login from './subcom/login.vue'
import register from './subcom/register.vue'

3.配置account的children子路由

        {
            path: '/account',
            component: account,
            children: [
                { path: 'login', component: login },
                { path: 'register', component: register }
            ]
        },

4.在account組件中應用子組件

<template>
    <div>
        <h1>這是account組件</h1>

        <!--  配置路由跳轉  -->
        <router-link to="/account/login">登錄</router-link>
        <router-link to="/account/register">註冊</router-link>

        <!--  配置路由視圖  -->
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "account"
    }
</script>

<style scoped>

</style>

5.在瀏覽器中查看子路由的映射效果

組件中style標籤lang屬性和scoped屬性的介紹

上面完成了組件路由以及子路由的映射，那麼對於組件中的css編寫有兩個屬性需要介紹一下。

下面首先來看一個組件css樣式的作用域問題。

1.首先在子組件login中設置樣式，看看會不會影響到其他組件

2.在瀏覽器看看組件的顏色

按照正常來說，因爲只在login組件設置了字體顏色爲紅色，所以應該只有login組件的字體爲紅色，其他組件不應該受到影響。

這樣其實就是作用域的問題，可以看到其實這時候的問題就是login的css樣式作用到了全局了。

那麼如何解決這個問題呢？只需要添加 scoped 屬性，限制 css 的作用域即可。

3.設置 scoped 限制組件的樣式作用域

再次查看瀏覽器，如下：

好了，這裏解決了作用域問題，還有另一個問題。

如果在 style 中使用 scss 語法編寫 css，會怎麼樣呢？

4.在account組件使用 scss 語法編寫 css樣式

普通的 style 標籤只支持 普通的 樣式，如果想要啓用 scss 或 less ，需要爲 style 元素，設置 lang 屬性

5.設置lang屬性

查看瀏覽器如下：

6.scoped屬性限制作用域的原理

從上圖可以看到，當組件的style設置了scoped屬性，那麼這個組件上就會被添加一個屬性data-v-hash值,然後 css 則會根據對應的 data-v-hash值 進行樣式設置。

所以父組件如果設置了樣式，並且設置了 scoped 屬性，css的作用域也會影響到所屬的子組件。

抽離vue-router模塊

從上面的示例寫到現在，可以看到main.js文件代碼寫得越來越多，如果太多的話，代碼維護起來就沒有那麼便利。如下圖：

較好的解決方法則是將導入組件以及設置路由規則的部分進行單獨抽離，然後再統一導入main.js

1.新建 router.js ，並將組件導入以及路由規則代碼進行剪切

import VueRouter from 'vue-router'

// 導入account以及goodslist組件
import account from './main/account.vue'
import goodslist from './main/goodslist.vue'

// 導入account的兩個子組件
import login from './subcom/login.vue'
import register from './subcom/register.vue'

// 創建路由對象
var router = new VueRouter({
    routes: [
        // 路由規則
        {
            path: '/account',
            component: account,
            children: [
                { path: 'login', component: login },
                { path: 'register', component: register }
            ]
        },
        { path: '/goodslist', component: goodslist }
    ]
});

// 暴露成員變量 router
export default router

2.在main.js導入router.js

3.在瀏覽器看看是否正常映射路由

更多精彩原創Devops文章，快來關注我的公衆號：【Devops社羣】 吧：