61.Vue 结合webpack使用vue-router

需求

在前面的篇章，我们已经使用export default以及render函数完成的vue框架在webpack中的组件基本使用方式。

可以继续往下看看，在 vm 中只能使用 render 来渲染一个组件，如果有更多需要的组件，该如何去集成处理呢？

方法当然是有的。

我们可以给vm提供渲染一个app的组件，然后在app的组件就可以继续持续渲染其他组件了。

本次示例还会集成使用vue-router在webpack中的使用方式来演示。

构建APP组件

1.首先初始化基础的文档机构，创建`app.vue`文件

61.Vue 结合webpack使用vue-router — image-20200314225450537

<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登录组件

<template>
    <div>
        <h1>这是login登录组件</h1>
    </div>
</template>

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

<style scoped>

</style>

<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