vue+webpack 入门实战（六）配合 vue-router 实现 SPA 单页应用

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

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

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

vue组件

官网对于组件讲解

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

组件入门

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


    hello Vue component
    hello Vue component

使用template标签

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

    

    
        This is Template 
        add ...

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


    This is Template 
    add ...
    This is Template 
    add ...

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

vue-router

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

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

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

起步

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

html:


  Hello App!
  
    Go to Foo
    Go to Bar

javascript:


var Foo = Vue.extend({
    template: 'This is foo!'
    })
var Bar = Vue.extend({
    template: 'This is bar!'
    })
var App = Vue.extend({})
var router = new VueRouter()
router.map({
    '/foo': {
        component: Foo
    },
    '/bar': {
        component: Bar
    }
    })
router.start(App, '#app')

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

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

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

01-webpack-vuerouter

定义路由规则

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


import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
import index from './components/app.vue';
import list from './components/list.vue';
import hello from './components/hello.vue';
Vue.config.debug = true;
var App = Vue.extend({});
var router = new VueRouter();
router.map({
    '/index':{
        name:'index',
        component:index,
    },
    '/list': {
        name:'list',
        component: list
    },
    });
router.redirect({
    '*':"/index"
    });
router.start(App, '#app');

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

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

实现路由跳转

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



    姓名：name
    age
    $route.router.go查看
    v-link查看列表
    回去主页

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

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

引用Vue组件

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

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

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

export default {
    components:{
        hello
    }
    }

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

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

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

路由嵌套

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

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

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

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

router.map({
    '/index':{
        name:'index',
        component:index,
        subRoutes:{ 
            '/hello':{
                name:'hello',
                component:hello
            }
        }
    },
    });

第二步：在组件中添加

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

将写在app.vue的标签中。

第三步：写入跳转路径

还是在app.vue中：

回去主页
嵌套的路由

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

注意：

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

最简单的理解应该就是：

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

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

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