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

2.在​​main.js​​中导入app组件，使用render进行渲染

image-20200314225732584

// 导入vueimport Vue from 'vue'// 导入app组件import app from './app.vue'// 创建vmvar vm = new Vue({ el: '#app', // 使用render函数渲染app组件 render: c => c(app)});

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

image-20200314225819039

安装​​vue-router​​

首先到官网看看​​vue-router​​的安装介绍，如下：

​​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-routerimport VueRouter from 'vue-router'// 手动创建使用VueRouterVue.use(VueRouter);

4.创建路由对象

image-20200314231034167

// 创建路由对象var router = new VueRouter({ routes: [ // .. 路由组件 ]});

创建组件用于路由映射

1.创建两个组件，提供路由映射：account组件、goodslist组件

image-20200314232213530

account.vue 代码如下：

goodslist.vue 代码如下：

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

5.在浏览器中查看路由映射组件效果

运行​​npm run dev​​启动服务，如下：

image-20200314233232546

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

实现children子路由

下面在创建多两个子组件，放在Account组件之下，例如：register注册、login登录组件。

然后使用children子路由进行映射。

1.创建register注册、login登录组件

image-20200314235232166

login.vue 代码如下：

register.vue 代码如下：

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

5.在浏览器中查看子路由的映射效果

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 } ]});// 暴露成员变量 routerexport default router

2.在​​main.js​​​导入​​router.js​​

image-20200315002954227

3.在浏览器看看是否正常映射路由

image-20200315003028896

image

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。