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 router
2.在main.js
导入router.js
image-20200315002954227
3.在浏览器看看是否正常映射路由
- contain_of宏定义
- 《Redis设计与实现》读书笔记(十三) ——Redis数据库其他内容与总结
- 《Redis设计与实现》读书笔记(十四) ——Redis RDB文件创建、载入与自动保存原理
- 框架 | Spark中的combineByKey
- 《Redis设计与实现》读书笔记(十五) ——Redis AOF持久化原理与实现
- PHP CodeBase: 生成N个不重复的随机数
- PHP转义Json里的特殊字符的函数
- PHP使用SOAP调用.net的WebService问题
- 框架 | spray-routing的核心流程
- 高通msm8909耳机调试
- 了解PHP中Stream(流)的概念与用法
- 动态绑定与静态绑定
- Android4.0 声卡配置-高通msm8916移植
- PHP安全:session劫持的防御
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Julia简易教程——2_julia数学运算及其基本功能
- Elasticsearch: 运用 Field collapsing 来减少基于单个字段的搜索结果
- Julia简易教程——1_julia中的整数和浮点数
- Linux 工作常用命令笔记(持续更新)
- Vim实用技巧——Vim分屏技巧总结
- Activity onStop,onDestroy延迟10s执行
- 内存优化实战
- Nali:一个离线查询 IP 地理信息和 CDN 提供商的终端利器
- MySQL8.0的几个新特性
- read_only和super_read_only参数的区别
- AWS 命名提示需要指定 region
- AWS CodeArtifact 如何设置用户的 TOKEN
- GORM V2 自动迁移和迁移接口的方法
- Vue Nginx反向代理配置 解决生产环境跨域
- react的事件处理为什么要bind this 改变this的指向?