61.Vue 结合webpack使用vue-router
61.Vue 结合webpack使用vue-router
需求
在前面的篇章，我们已经使用export default以及render函数完成的vue框架在webpack中的组件基本使用方式。
可以继续往下看看，在 vm 中只能使用 render 来渲染一个组件，如果有更多需要的组件，该如何去集成处理呢？
方法当然是有的。
我们可以给vm提供渲染一个app的组件，然后在app的组件就可以继续持续渲染其他组件了。
本次示例还会集成使用vue-router在webpack中的使用方式来演示。
构建APP组件
1.首先初始化基础的文档机构，创建app.vue文件
image-20200314225450537
<template>
<div>
<h1>这是App组件</h1>
</div>
</template>
<script>
export default {
data(){
return {}
},
}
</script>
<style>
</style>2.在main.js中导入app组件，使用render进行渲染
image-20200314225732584
// 导入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 的渲染效果，如下：
image-20200314225819039
安装vue-router
首先到官网看看vue-router的安装介绍，如下：
1.查看官网的安装
https://router.vuejs.org/zh/installation.html
image-20200314230256070
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如下：
image-20200314230603383
3.配置使用vue-router
image-20200314230716241
// 导入vue-router
import VueRouter from 'vue-router'
// 手动创建使用VueRouter
Vue.use(VueRouter);4.创建路由对象
image-20200314231034167
// 创建路由对象
var router = new VueRouter({
routes: [
// .. 路由组件
]
});创建组件用于路由映射
1.创建两个组件，提供路由映射：account组件、goodslist组件
image-20200314232213530
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组件
image-20200314232515183
// 导入account以及goodslist组件
import account from './main/account.vue'
import goodslist from './main/goodslist.vue'3.配置路由规则
image-20200314232643870
// 创建路由对象
var router = new VueRouter({
routes: [
// 路由规则
{ path: '/account', component: account },
{ path: '/goodslist', component: goodslist }
]
});好了，配置完毕路由之后，下一步就在app组件中应用。
4.在app组件中应用组件
image-20200314233059851
<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启动服务，如下：
image-20200314233205907
image-20200314233219402
image-20200314233232546
可以看到跳至不同的路由，则映射出了不同的组件。
实现children子路由
下面在创建多两个子组件，放在Account组件之下，例如：register注册、login登录组件。
然后使用children子路由进行映射。
1.创建register注册、login登录组件
image-20200314235232166
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 组件
image-20200314235616689
// 导入account的两个子组件
import login from './subcom/login.vue'
import register from './subcom/register.vue'3.配置account的children子路由
image-20200314235737114
{
path: '/account',
component: account,
children: [
{ path: 'login', component: login },
{ path: 'register', component: register }
]
},4.在account组件中应用子组件
image-20200315000025057
<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.在浏览器中查看子路由的映射效果
image-20200315000116468
image-20200315000131811
image-20200315000145435
组件中style标签lang属性和scoped属性的介绍
上面完成了组件路由以及子路由的映射，那么对于组件中的css编写有两个属性需要介绍一下。
下面首先来看一个组件css样式的作用域问题。
1.首先在子组件login中设置样式，看看会不会影响到其他组件
image-20200315000725924
2.在浏览器看看组件的颜色
image-20200315000831140
按照正常来说，因为只在login组件设置了字体颜色为红色，所以应该只有login组件的字体为红色，其他组件不应该受到影响。
这样其实就是作用域的问题，可以看到其实这时候的问题就是login的css样式作用到了全局了。
那么如何解决这个问题呢？只需要添加 scoped 属性，限制 css 的作用域即可。
3.设置 scoped 限制组件的样式作用域
image-20200315001208620
再次查看浏览器，如下：
image-20200315001248107
好了，这里解决了作用域问题，还有另一个问题。
如果在 style 中使用 scss 语法编写 css，会怎么样呢？
4.在account组件使用 scss 语法编写 css样式
image-20200315001624074
普通的 style 标签只支持 普通的 样式，如果想要启用 scss 或 less ，需要为 style 元素，设置 lang 属性
5.设置lang属性
image-20200315001732240
查看浏览器如下：
image-20200315001941300
6.scoped属性限制作用域的原理
image-20200315003236000
从上图可以看到，当组件的style设置了scoped属性，那么这个组件上就会被添加一个属性data-v-hash值,然后 css 则会根据对应的 data-v-hash值 进行样式设置。
所以父组件如果设置了样式，并且设置了 scoped 属性，css的作用域也会影响到所属的子组件。
抽离vue-router模块
从上面的示例写到现在，可以看到main.js文件代码写得越来越多，如果太多的话，代码维护起来就没有那么便利。如下图：
image-20200315002433454
较好的解决方法则是将导入组件以及设置路由规则的部分进行单独抽离，然后再统一导入main.js
1.新建 router.js ，并将组件导入以及路由规则代码进行剪切
image-20200315002901899
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 router2.在main.js导入router.js
image-20200315002954227
3.在浏览器看看是否正常映射路由
