Vue-router（路由）创建简单的单页面应用

Vue-Router的简单使用：

Vue Router是Vue.js的官方路由器。它与Vue.js核心深度集成，使用Vue.js构建单页应用程序变得轻而易举

1.安装：

（1：直接下载）

vue-router下载地址：

https://unpkg.com/vue-router/dist/vue-router.js

（2：npm下载）

npm install vue-router

推荐使用淘宝镜像cnpm安装。
如果要在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能：在项目目录下的src文件夹中的main.js文件写入：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

2.简单实例

第一步：引入vue.js和vue-router.js

<script src="vue.js"></script>
<script src="vue-router.js"></script>

html：
使用router-link组件进行导航，属性to用来指定链接，其中router-link默认会被渲染成一个<a>标签

router-view定义路由出口，路由匹配到的组件会在此处渲染

具体代码如下：

<div id="app">
    <ul>
        <li>
            <router-link to="/home">home</router-link>
        </li>
        <li>
            <router-link to="/news">news</router-link>

        </li>
        <li>
            <router-link to="/mine">mine</router-link>

        </li>
    </ul>
    <div>
        <router-view></router-view>
    </div>

</div>

javaScript：

首先定义路由组件：

var  Home = { template: '<div>我是主页面</div>' };
var  News = { template: '<div>我是新闻界面</div>' };
var Mine = { template: '<div>我是我的界面</div>' }

定义路由：

var routes = [
        { path: '/home', component: Home },
        { path: '/news', component: News },
        { path: '/mine', component: Mine }
    ];

创建router实例：

 var router = new VueRouter({
        routes:routes
    });

创建并且挂在根实例：（让整个应用都具有路由功能）

 var app = new Vue({
        router:router
    }).$mount('#app')

运行，一个超级简单的单页面应用就完成了。