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文檔
