webpack入坑之旅（六）配合vue-router实现SPA

时间：2022-09-15 09:35:35

这是一系列文章，此系列所有的练习都存在了我的github仓库中vue-webpack，在本人有了新的理解与认识之后,会对文章有不定时的更正与更新。下面是目前完成的列表：

在上面的练习当中我们已经成功的加载了一个.vue格式的单文件组件，并且实现了在使用vue情况下的自动刷新。

但是我们最终的目的还是要实现单页面应用程序，这个时候我们就必不可少的需要使用到路由管理器来进行SPA的开发，vue官方为我们提供了一个官方库vue-router，并且配有对应的中文文档。关于里面的内容大家自行前去观看。在这里，只会把我们需要的东西拿出来讲。

vue组件

官网对于组件讲解

在Vue中定义一个组件非常简单，只需要一对自定义标签，在其中填入内容就可以进行我们的组件编写了，然后使用Vue.component()去注册我们的组件下面来看一个例子，来直观的看看vue的组件。

组件入门

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="js/vue.js"></script>
<body>
<div id="app">
<my-component></my-component>
<!-- 自定义标签作为组件名称 -->
<my-component></my-component>
<!-- 复用 -->
</div>
<script>
// 定义并且注册组件
// 在官方的示例中使用 Vue.extend({})先注册了一个定义模板，再引用，看个人喜好吧
Vue.component("my-component", {
template:"<h2>hello Vue component</h2>"
})
// 创建根实例
// 在这里 定义并且注册组件 必须创建根实例前，不然会报错，因为解析顺序的问题？
new Vue({
el:"#app"
});
</script>
</body>

上面就是最简单的定义组件的方式，template属性中写的东西:就是<my-component>这个自定义标签渲染后展现出来的样式，这里渲染为：

1
2
3
4
<div id="app">
<h2>hello Vue component</h2>
<h2>hello Vue component</h2>
</div>

使用template标签

在上面这段代码中组件内的内容都被写在template属性中，如果组件中的内容继续增加，一堆的引号和加号来拼接这些字符串简直就是噩梦。所以Vue 引入了template标签（html5定义的，浏览器默认不去解析里面的内容）。<template> 不能用在 <table> 内下面来看看它的使用方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="js/vue.js"></script>
<body>
<!-- 使用 template 并且添加选择器(只能使用id)-->
<template id="myTemp">
<h2>This is Template </h2>
<p>add ...</p>
</template>
<div id="app">
<my-component></my-component>
<my-component></my-component>
</div>
 
<script>
Vue.component("my-component", {
template:"#myTemp"//对应上面定义的template标签中的选择器
})
new Vue({
el:"#app"
});
</script>
</body>

可以看到在注册组件中，可以template可以使用选择器来获取到上面我们<template>标签中的内容。所以这里应该会被渲染为：

1
2
3
4
5
6
<div id="app">
<h2>This is Template </h2>
<p>add ...</p>
<h2>This is Template </h2>
<p>add ...</p>
</div>

组件的基础介绍就到这，更多详细内容请移步官网

vue-router

刚刚已经对于vue的组件有了一定的了解。现在来结合vue-router，来进行一下动态的切换。

首先是安装，如果使用npm的形式的话，直接运行npm install vue-router --save,就可以看到vue-router，已经被添加到了项目依赖中。直接上ES6的语法来进行引入

1
2
3
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

起步

其实这一部分vue-router的中文文档中已经讲的非常详细了。。在这里与它不同的是它用的CommonJS的规范来进行模块安装，而我使用ES6的import，有兴趣自己去看- -。其他的内容我就直接扒下来了。

html:

1
2
3
4
5
6
7
8
9
10
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用指令 v-link 进行导航。 -->
<a v-link="{ path: '/foo' }">Go to Foo</a>
<a v-link="{ path: '/bar' }">Go to Bar</a>
</p>
<!-- 路由外链 -->
<router-view></router-view>
</div>

javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 定义组件
var Foo = Vue.extend({
template: '<p>This is foo!</p>'
})
var Bar = Vue.extend({
template: '<p>This is bar!</p>'
})
// 路由器需要一个根组件。
// 出于演示的目的，这里使用一个空的组件，直接使用 HTML 作为应用的模板
var App = Vue.extend({})
// 创建一个路由器实例
// 创建实例时可以传入配置参数进行定制，为保持简单，这里使用默认配置
var router = new VueRouter()
// 定义路由规则
// 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend
// 创建的组件构造函数，也可以是一个组件选项对象。
// 稍后我们会讲解嵌套路由
router.map({
'/foo': {
component: Foo
},
'/bar': {
component: Bar
}
})
// 现在我们可以启动应用了！
// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
router.start(App, '#app')

我个人感觉这部分还是很好理解的，官方也给了一个在线示例应用。很好的展现了它的路由切换。

简单的介绍到这，下面最重要的部分到了，看看如何结合我们定义的.vue单文件组件。

首先来看我们的文件目录结构：

webpack入坑之旅（六）配合vue-router实现SPA

定义路由规则

最主要是main.js的变化，直接在文件中讲解了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 引入vue以及vue-router
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
// 引入组件！直接使用es6的语法
import index from './components/app.vue';
import list from './components/list.vue';
import hello from './components/hello.vue';
//开启debug模式
Vue.config.debug = true;
// new Vue(app);//这是上一篇用到的，新建一个vue实例，现在使用vue-router就不需要了。
// 路由器需要一个根组件。
var App = Vue.extend({});
// 创建一个路由器实例
var router = new VueRouter();
// 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend创建的组件构造函数，也可以是一个组件选项对象。
// 稍后我们会讲解嵌套路由
router.map({//定义路由映射
'/index':{//访问地址
name:'index',//定义路由的名字。方便使用。
component:index,//引用的组件名称，对应上面使用`import`导入的组件
//component:require("components/app.vue")//还可以直接使用这样的方式也是没问题的。不过会没有import集中引入那么直观
},
'/list': {
name:'list',
component: list
},
});
router.redirect({//定义全局的重定向规则。全局的重定向会在匹配当前路径之前执行。
'*':"/index"//重定向任意未匹配路径到/index
});
// 现在我们可以启动应用了！
// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
router.start(App, '#app');

在index.html需要有用于渲染匹配的组件，如下

1
2
3
<div id="app">
<router-view></router-view>
</div>

现在当我们运行 npm start 进入http://localhost:8080/就会自动跳转到http://localhost:8080/#!/index，并且读取里面的内容。

实现路由跳转

主要抽出app.vue中的内容来讲解，的内容是：(list.vue里面的内容自行设置查看吧)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
<div>
<h1>姓名：{{name}}</h1>
<h2>{{age}}</h2>
<button @click="golist">$route.router.go查看</button>
<a v-link="{ name: 'list' }">v-link查看列表</a>
<a v-link="{ name: 'index' }">回去主页</a>
</div>
</template>
<script>
export default {//这里是官方的写法，默认导出，ES6
data () { //ES6，等同于data:function(){}
return { //必须使用这样的形式，才能创建出单一的作用域
name:"guowenfh",
age:"21"
}
},
methods :{
golist () {//方法，定义路由跳转，注意这里必须使用this，不然报错
this.$route.router.go({name:"list"});
}
}
}
</script>
<style></style>
<!-- 样式自行设置，或者直接看源码就好 -->

因为自刷新的缘故，直接切换到浏览器。

点击上面使用的v-link，与router.go的方式都可以跳转到list定义的路由。（观察浏览器地址栏的变化）在这里我们使用的{name:"list"}，使用{ path: '/list' }会有同样的效果。

引用Vue组件

在第一小点里面我们看到了在页面内的组件的使用方法，第二小点中学习到了vue-router的制定路由规则。

看过这两个地方之后，我们把思维发散开来，应该就能触类旁通的想到如何在页面中嵌套加载别的组件了。
我们创建一个hello.vue ，里面内容随意。现在我们如果要在app.vue中加载它，那么只需要在app.vue中使用import hello from "./hello.vue"（其实这个达到了使用require两步的效果。引入赋值）。

引入之后，只需要如下注册：

1
2
3
4
5
6
export default {
//其它的就
components:{
hello//若还有更多的组件，只需要在import的情况下，以逗号分割，继续注册就好
}
}

最后在app.vue中添加<hello></hello>这一对自定义标签，就可以实现加载hello.vue中的内容。

组件的嵌套也就是这样，很简单的描述完了，但是怎么样去抽离组件，在工作中积累可以复用的组件才是我们真正需要去思考的。

那么先到这，关于组件之间通信的问题，留到以后慢慢了解。

路由嵌套

还是刚刚的代码与目录结构，我们已经实现了组件之间的嵌套，但是有时并不希望组件直接就加载进来，而是在用户点击后才展现在页面中，这是就需要使用到路由嵌套。

为了偷懒，这里就直接使用hello.vue。实现嵌套路由主要有以下几步：

第一步：制定嵌套路由规则：

看main.js下面这部分的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
router.map({
'/index':{
name:'index',
component:index,
// 在/index下设置一个子路由
subRoutes:{
// 当匹配到/index/hello时，会在index的<router-view>内渲染
'/hello':{
name:'hello',//可有可无，主要是为了方便使用
// 一个hello组件
component:hello
}
}
},
});

第二步：在组件中添加<router-view>

来自官网的解释：<router-view> 用于渲染匹配的组件，它基于Vue的动态组件系统，所以它继承了一个正常动态组件的很多特性。

将<router-view>写在app.vue的<template></template>标签中。

第三步：写入跳转路径

还是在app.vue中：

1
2
3
<a v-link="{ name: 'index' }">回去主页</a>
<!-- 点击这两个标签就会实现页面内的切换效果 -->
<a v-link="{ name: 'hello' }">嵌套的路由</a>

，切换到浏览器，点击该嵌套的路由即可让hello.vue中的展现出来，在这里直接使用了v-link来实现跳转（知道为什么要写name了吧。。如果使用path会是这样的{ path: '/index/hello' }- -。 ） ，当然router.go同理。（注意在点击两个不同的文字时，地址栏的变化，以及展现内容的切换）

注意：

在我的源码中是在<style scoped></style>标签中定义样式的，请注意scoped的使用，它表示在该style中定义的样式只会在当前的组件中起到效果，而不会去影响全局的css样式。

最简单的理解应该就是：

未写该scoped属性的所有组件中的样式，在经过vue-loader编译之后拥有全局作用域。相当于共用一份css样式表。

而写了该属性的的组件中定义的样式，拥有独立作用域。相当于除去引入了公用的一份css样式表外，但单独拥有一份css的样式表。

好了，先到这。讲的有些凌乱，下次见

webpack入坑之旅（六）配合vue-router实现SPA的更多相关文章

  1. webpack入坑之旅（五）加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  2. webpack入坑之旅（四）扬帆起航

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  3. webpack入坑之旅（三）webpack&period;config入门

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  4. webpack入坑之旅（二）loader入门

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack 在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  5. webpack入坑之旅（一）不是开始的开始

    最近学习框架,选择了vue,然后接触到了vue中的单文件组件,官方推荐使用 Webpack + vue-loader构建这些单文件 Vue 组件,于是就开始了webpack的入坑之旅.因为原来没有用过 ...

  6. webpack入坑之旅（一）入门安装

    学习一个新的东西,首先第一步就是安装,有时候会遇到各种奇葩的问题 至于什么是webpack我这里就不介绍了,请参考官网:https://github.com/webpack/webpack 安装 前提 ...

  7. webpack入坑之旅

    转自: http://guowenfh.github.io/2016/03/24/vue-webpack-01-base/ http://guowenfh.github.io/2016/03/25/v ...

  8. vue&plus; vue-router &plus; webpack 踩坑之旅

    说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案   老司机可以忽略下面的内容了 1)起因  考虑到数据分离的问题  因为server是express搭的   自然少 ...

  9. webpack踩坑之旅

    1.安装webpack失败问题 错误原因: 这主要是我以普通用户的身份进行webpack的全局安装,权限不够. [普通用户] 说白了就是通过运行window+r+cmd进入的命令行 解决方式: 用管理 ...

随机推荐

  1. 初学AOP

    src\dayday\Count.java package dayday;import org.springframework.stereotype.Component;/** * Created b ...

  2. &lbrack;VBS&rsqb;脚本中的字典、动态数组、队列和堆栈

    今天用VBS脚本写了几个程序,用到了字典(Dictionary).动态数组(ArrayList).队列(Queue)和堆栈(Stack).现在写篇Blog总结一下 :-) 1.编写环境 今天突发奇想下 ...

  3. php生成百度新闻源xml

    <?php /* http://baike.baidu.com/view/125547.htm#2 百度网新闻开放协议 */ mysql_connect($CFG['db_host'] ,$CF ...

  4. zookeeper数据弱一致性

    zookeeper本身支持单机部署和集群部署,生产环境建议使用集群部署,因为集群部署不存在单点故障问题,并且zookeeper建议部署的节点个数为奇数个,只有超过一半的机器不可用整个zk集群才不可用. ...

  5. STM32中的位带&lpar;bit-band&rpar;操作（转）

    源:STM32中的位带(bit-band)操作 支持了位带操作后,可以使用普通的加载/存储指令来对单一的比特进行读写.在 CM3 中,有两个区中实现了位带.其中一个是 SRAM 区的最低 1MB 范围 ...

  6. Python开发【第五篇】内置函数

    abs() 函数返回数字的绝对值 __author__ = "Tang" a = -30 all() 函数用于判断给定的可迭代参数iterable中的所有元素是否都为True,如果 ...

  7. &lbrack;Swift&rsqb;Alamofire：设置网络请求超时时间【timeout】的两种方式

    两种方式作用相同,是同一套代码的两种表述. 第一种方式:集聚. 直接设置成员属性(全局属性),这种方法不能灵活修改网络请求超时时间timeout. 声明为成员属性: // MARK: - 设置为全局变 ...

  8. openj 4004 01背包问题求方案数

    #include<iostream> #include<cstring> #include<cstdio> using namespace std; #define ...

  9. SQL server学习（五）T-SQL编程之存储过程

    周五了,祝大家周末愉快. 之前一直在写SQL server的分享,今天再来个T-SQL编程中的存储过程. 存储过程 存储过程(procedure)类似于C语言中的函数,用来执行管理任务或应用复杂的业务 ...

  10. ubuntu 安装&lpar;install&rpar; pwntcha&lbrack;一个做&quot&semi;验证码识别&quot&semi;的开源程序&rsqb;

    一.安装 1. sudo apt-get install libsdl1.2-dev libsdl1.2debian sudo apt-get install libsdl1.2-dev(比较大,10 ...

相关文章