0
点赞
收藏
分享

微信扫一扫

61.Vue 结合webpack使用vue-router

乱世小白 2022-07-12 阅读 101
vuepythonjavacssjavascriptOpenStack云计算

需求

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

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

方法当然是有的。

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

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

构建APP组件

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


61.Vue 结合webpack使用vue-router_java

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_css_02

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_python_03

image-20200314225819039

安装​​vue-router​​

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

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

1.查看官网的安装

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


61.Vue 结合webpack使用vue-router_java_04

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_python_05

image-20200314230603383

3.配置使用​​vue-router​​


61.Vue 结合webpack使用vue-router_python_06

image-20200314230716241 

// 导入vue-router
import VueRouter from 'vue-router'

// 手动创建使用VueRouter
Vue.use(VueRouter);

4.创建路由对象


61.Vue 结合webpack使用vue-router_python_07

image-20200314231034167 

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

创建组件用于路由映射

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


61.Vue 结合webpack使用vue-router_python_08

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_css_09

image-20200314232515183 

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

3.配置路由规则


61.Vue 结合webpack使用vue-router_java_10

image-20200314232643870 

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

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

4.在app组件中应用组件


61.Vue 结合webpack使用vue-router_vue_11

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_python_12

image-20200314233205907 61.Vue 结合webpack使用vue-router_javascript_13

image-20200314233219402 61.Vue 结合webpack使用vue-router_java_14

image-20200314233232546

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

实现children子路由

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

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

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


61.Vue 结合webpack使用vue-router_vue_15

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_java_16

image-20200314235616689 

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

3.配置​​account​​​的​​children​​子路由


61.Vue 结合webpack使用vue-router_java_17

image-20200314235737114 

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

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


61.Vue 结合webpack使用vue-router_css_18

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_vue_19

image-20200315000116468 61.Vue 结合webpack使用vue-router_python_20

image-20200315000131811 61.Vue 结合webpack使用vue-router_java_21

image-20200315000145435

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

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

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

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


61.Vue 结合webpack使用vue-router_java_22

image-20200315000725924

2.在浏览器看看组件的颜色


61.Vue 结合webpack使用vue-router_java_23

image-20200315000831140

按照正常来说，因为只在login组件设置了字体颜色为红色，所以应该只有login组件的字体为红色，其他组件不应该受到影响。

这样其实就是作用域的问题，可以看到其实这时候的问题就是login的css样式作用到了全局了。

那么如何解决这个问题呢？只需要添加 scoped 属性，限制 css 的作用域即可。

3.设置 scoped 限制组件的样式作用域


61.Vue 结合webpack使用vue-router_javascript_24

image-20200315001208620

再次查看浏览器，如下：


61.Vue 结合webpack使用vue-router_java_25

image-20200315001248107

好了，这里解决了作用域问题，还有另一个问题。

如果在 style 中使用 scss 语法编写 css，会怎么样呢？

4.在account组件使用 scss 语法编写 css样式


61.Vue 结合webpack使用vue-router_javascript_26

image-20200315001624074

普通的 style 标签只支持 普通的 样式，如果想要启用 scss 或 less ，需要为 style 元素，设置 lang 属性

5.设置lang属性


61.Vue 结合webpack使用vue-router_python_27

image-20200315001732240

查看浏览器如下：


61.Vue 结合webpack使用vue-router_css_28

image-20200315001941300

6.scoped属性限制作用域的原理


61.Vue 结合webpack使用vue-router_css_29

image-20200315003236000

从上图可以看到，当组件的​​style​​​设置了​​scoped​​​属性，那么这个组件上就会被添加一个属性​​data-v-hash值​​​,然后 css 则会根据对应的 ​​data-v-hash值​​ 进行样式设置。

所以父组件如果设置了样式，并且设置了 ​​scoped​​ 属性，css的作用域也会影响到所属的子组件。

抽离vue-router模块

从上面的示例写到现在，可以看到​​main.js​​文件代码写得越来越多，如果太多的话，代码维护起来就没有那么便利。如下图：


61.Vue 结合webpack使用vue-router_javascript_30

image-20200315002433454

较好的解决方法则是将导入组件以及设置路由规则的部分进行单独抽离，然后再统一导入main.js

1.新建 ​​router.js​​ ，并将组件导入以及路由规则代码进行剪切


61.Vue 结合webpack使用vue-router_vue_31

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​​


61.Vue 结合webpack使用vue-router_vue_32

image-20200315002954227

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


61.Vue 结合webpack使用vue-router_python_33

image-20200315003028896

更多精彩原创Devops文章，快来关注我的公众号：【Devops社群】 吧：


61.Vue 结合webpack使用vue-router_python_34

image 61.Vue 结合webpack使用vue-router_vue_35

image

举报

相关推荐

vue-router使用

vue.js前端javascript

[Vue]Vue-router

大数据

Vue-router

android

vue-router

日记本前端vuevue-router前端开发那些事儿

vue-router使用总结

前端

Vue 路由（vue-router）简单使用

vue.jsjavascript前端

Vue路由vue-router

vue.jsjavascript前端

Vue ——06、vue-router

vue.jswebpack前端

【前端】[vue3] vue-router使用

前端vue.jsjavascript

关于vue-router的使用

vue异步操作生命周期历史记录前端开发
0 条评论