<!DOCTYPE html>
<html>
<head>
</head>
<body>
<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>
<button @click="go_bar">go bar</button>
<button @click="go_foo">go foo</button>
<!-- 显示路由后的视图 -->
<router-view> </router-view>
</div>
<script>
// 定义组件
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 定义路由
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes: routes
})
// 创建和挂载根实例
const app = new Vue({
router,
methods: {
go_bar : function() {
this.$router.push('/bar')
},
go_foo : function() {
this.$router.push('/foo')
},
}
}).$mount('#app')
</script>
</body>
</html>
网友评论