在上面的练习当中我们已经成功的加载了一个.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>
|
组件的基础介绍就到这，更多详细内容请移步官网,有着非常清晰的讲解。
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‘)
|
我个人感觉这部分还是很好理解的，官方也给了一系列的例子：查看仓库的 README.md 来运行它们。很好的展现了它的路由切换。
简单的介绍到这，下面最重要的部分到了，看看如何结合我们定义的.vue单文件组件。
首先来看我们的文件目录结构：
定义路由规则
最主要是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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
Vue.use(VueRouter)
// 引入vue以及vue-router的。
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
// 引入组件！
import App from ‘./App.vue‘
import Index from ‘./components/index.vue‘
import List from ‘./components/list.vue‘
import Hello from ‘./components/hello.vue‘
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
?{
???path: ‘/index‘,
???component: Index,
???children: [
???????{ path: ‘hello‘, component: Hello }
???]
?},
?{
???path: ‘/list‘,
???component: List
?},
?{
???path: ‘*‘,
???redirect: ‘/index‘
?}
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
?routes // (缩写) 相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
new Vue({
?el: ‘#app‘,
?router,
?render: h => h(App)
})
// 现在，应用已经启动了！
|
App.vue 需要有用于渲染匹配的组件，如下
1
2
3
| <template>
???<router-view></router-view>
</template>
|
现在当我们运行 npm start 进入http://localhost:8080/就会自动跳转到http://localhost:8080/#/index，并且读取里面的内容。
实现路由跳转
主要抽出index.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
27
28
29
30
31
32
| <template>
<div>
???<h1>姓名：{{name}}</h1>
???<h2>{{age}}</h2>
???<button @click="golist">$route.push查看</button>
???<router-link :to="{ path: ‘/list‘ }">v-link查看列表</router-link>
???<router-link :to="{ path: ‘/index‘ }">回去主页</router-link>
???<router-link :to="{ path: ‘/index/hello‘ }">嵌套的路由</router-link>
???<hello></hello>
???<router-view></router-view>
</div>
</template>
<script>
???// import hello from "./hello.vue"
???export default {
???????data () {
???????????return {
???????????????name:"guowenfh",
???????????????age:"21"
???????????}
???????},
???????methods :{
???????????golist (){
???????????????this.$router.push({path:"/list"})
???????????????// this.$route.router.go({name:"list"});
???????????}
???????}
???}
</script>
<style></style>
<!-- 样式自行设置，或者直接看源码就好 -->
|
因为自刷新的缘故，直接切换到浏览器。
点击上面使用的router-link，与this.$router.push的方式都可以跳转到list定义的路由。（观察浏览器地址栏的变化）在这里我们使用 { path: ‘/list‘ } ,如有别名的话，使用的{name:"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
| {
?path: ‘/index‘,
?component: Index,
?// 在/index下设置一个子路由
?children: [
??????// 当匹配到/index/hello时，会在index的<router-view>内渲染
?????{
?????????path: ‘hello‘,
?????????name:‘hello‘,//可有可无，主要是为了方便使用
?????????// 一个hello组件
?????????component: Hello
?????}
?]
}
|
第二步：在组件中添加<router-view>
来自官网的解释：<router-view> 用于渲染匹配的组件，它基于Vue的动态组件系统，所以它继承了一个正常动态组件的很多特性。
将<router-view>写在app.vue的<template></template>标签中。
第三步：写入跳转路径
还是在index.vue中：
1
2
3
| <router-link :to="{ path: ‘/index‘ }">回去主页</router-link>
<!-- 点击这两个标签就会实现页面内的切换效果 -->
<router-link :to="{ path: ‘/index/hello‘ }">嵌套的路由</router-link>
|
，切换到浏览器，点击该嵌套的路由即可让hello.vue中的展现出来，在这里直接使用了router-link来实现跳转 ，当然$router.push同理。（注意在点击两个不同的文字时，地址栏的变化，以及展现内容的切换）
注意：
记录 vue-webapck 的学习基础，代码示例 github地址
这个教程更多的是从基础开始学习，vue 与 webpack 应该要怎么结合。在真实的实际项目中，还是推荐 vue-cli。
关于 vue-cli 生成的配置解析可以参考一下 vue-cli#2.0 webpack 配置分析
在我的源码中是在<style scoped></style>标签中定义样式的，请注意scoped的使用，它表示在该style中定义的样式只会在当前的组件中起到效果，而不会去影响全局的css样式。
最简单的理解应该就是：
未写该scoped属性的所有组件中的样式，在经过vue-loader编译之后拥有全局作用域。相当于共用一份css样式表。
而写了该属性的的组件中定义的样式，拥有独立作用域。相当于除去引入了公用的一份css样式表外，但单独拥有一份css的样式表。
webpack入坑之旅（六）配合vue-router实现SPA
原文地址：https://www.cnblogs.com/ghyes/p/9429594.html