html
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App</h1>
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>
JavaScript
如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
定义 (路由) 组件。 可以从其他文件 import 进来
constFoo={template:'foo'}
constBar={template:'bar'}
- 定义路由
每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器， 或者，只是一个组件配置对象。我们晚点再讨论嵌套路由。
constroutes=[
{path:'/foo',component:Foo},
{path:'/bar',component:Bar}
]
- 创建 router 实例，然后传
routes配置。 你还可以传别的配置参数, 不过先这么简单着吧。
constrouter=newVueRouter({
routes// (缩写) 相当于 routes: routes
})
- 创建和挂载根实例。 记得要通过 router 配置参数注入路由， 从而让整个应用都有路由功能。
constapp=newVue({
router
}).$mount('#app')
通过注入路由器，我们可以在任何组件内通过 this.route 访问当前路由：
// Home.vue
export default{
computed: {
username(){
// 我们很快就会看到 `params` 是什么
returnthis.$route.params.username
}
},
methods: {
goBack(){
window.history.length>1
? this.$router.go(-1)
: this.$router.push('/')
}
}
}
该文档通篇都常使用 router 实例。留意一下 this.$router 和 router 使用起来完全一样。我们使用 this.$router 的原因是我们并不想在每个独立需要封装路由的组件中都导入路由。
引用：vue文档
