新知一下
海量新知
6 0 8 8 2 6 8

61.Vue 结合webpack使用vue-router

Devops社群 | 分享Devops技术栈 2020/08/27 03:39

需求

在前面的篇章,我们已经使用

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进行渲染

新知达人, 61.Vue 结合webpack使用vue-router

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 的渲染效果,如下:

新知达人, 61.Vue 结合webpack使用vue-router

image-20200314225819039

安装

vue-router

首先到官网看看

vue-router

的安装介绍,如下:

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

1.查看官网的安装

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

新知达人, 61.Vue 结合webpack使用vue-router

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

如下:

新知达人, 61.Vue 结合webpack使用vue-router

image-20200314230603383

3.配置使用

vue-router

新知达人, 61.Vue 结合webpack使用vue-router

image-20200314230716241

// 导入vue-router import VueRouter from 'vue-router' // 手动创建使用VueRouter Vue.use(VueRouter);

4.创建路由对象

新知达人, 61.Vue 结合webpack使用vue-router

image-20200314231034167

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

创建组件用于路由映射

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

新知达人, 61.Vue 结合webpack使用vue-router

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

组件

新知达人, 61.Vue 结合webpack使用vue-router

image-20200314232515183

// 导入account以及goodslist组件 import account from './main/account.vue' import goodslist from './main/goodslist.vue'

3.配置路由规则

新知达人, 61.Vue 结合webpack使用vue-router

image-20200314232643870

// 创建路由对象 var router = new VueRouter({ routes: [ // 路由规则 { path: '/account', component: account }, { path: '/goodslist', component: goodslist } ] });

好了,配置完毕路由之后,下一步就在app组件中应用。

4.在app组件中应用组件

新知达人, 61.Vue 结合webpack使用vue-router

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

启动服务,如下:

新知达人, 61.Vue 结合webpack使用vue-router

image-20200314233205907

新知达人, 61.Vue 结合webpack使用vue-router

image-20200314233219402

新知达人, 61.Vue 结合webpack使用vue-router

image-20200314233232546

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

实现children子路由

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

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

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

新知达人, 61.Vue 结合webpack使用vue-router

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

新知达人, 61.Vue 结合webpack使用vue-router

image-20200314235616689

// 导入account的两个子组件 import login from './subcom/login.vue' import register from './subcom/register.vue'

3.配置

account

children

子路由

新知达人, 61.Vue 结合webpack使用vue-router

image-20200314235737114

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

4.在account组件中应用子组件

新知达人, 61.Vue 结合webpack使用vue-router

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.在浏览器中查看子路由的映射效果

新知达人, 61.Vue 结合webpack使用vue-router

image-20200315000116468

新知达人, 61.Vue 结合webpack使用vue-router

image-20200315000131811

新知达人, 61.Vue 结合webpack使用vue-router

image-20200315000145435

组件中style标签lang属性和scoped属性的介绍

上面完成了组件路由以及子路由的映射,那么对于组件中的css编写有两个属性需要介绍一下。

下面首先来看一个组件css样式的作用域问题。

1.首先在子组件login中设置样式,看看会不会影响到其他组件

新知达人, 61.Vue 结合webpack使用vue-router

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.在浏览器看看是否正常映射路由

image-20200315003028896


更多“Vue”相关内容

更多“Vue”相关内容

新知精选

更多新知精选