vue-router

最基础的路由配置步骤

1.创建路由器组件（JS）

创建两个组件构造器Home和About:

var Home = Vue.extend({
    template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
    data: function() {
        return {
            msg: 'Hello, vue router!'
        }
    }
})

var About = Vue.extend({
    template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
})

})

2.创建Router

调用构造器VueRouter，创建一个路由器实力router

var router = new VueRouter()

3.映射路由

调用router 的map方法映射路由，每条路由以key-value的形式存在，key是路径，value是组件。例如：‘/home’是一条路由的key，他表示路径；{component：Home}则表示该路由映射的组件。

router.map({
    '/home': { component: Home },
    '/about': { component: About }
})

4.使用v-link指令

<div class="list-group">
    <a class="list-group-item" v-link="{ path: '/home'}">Home</a>
    <a class="list-group-item" v-link="{ path: '/about'}">About</a>
</div>

在a元素上使用v-link指令跳转到指定路径。（官方文档推荐使用router-link）。

5.使用router-view标签

在页面上使用router-view标签，它用于渲染匹配的组件。

<router-view></router-view>

6.启动路由

路由器的运行需要一个根组件，router.start（‘App’，‘#app’）表示router 会创建一个App实例，并且挂载到#app元素。（使用vue-router 的应用，不需要显式地创建Vue实例，而是调用start方法将根组件挂载到某个元素上。）

var App = Vue.extend({})
router.start(App, '#app')

原文地址：vue-router 快速入门