路由用于單頁(yè)面應(yīng)用的模擬跳轉(zhuǎn)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>路由</title>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
</head>
<body>
<div id="app">
<p>
<!-- 使用router-link標(biāo)簽代表a標(biāo)簽 -->
<!-- to屬性指定路徑顯示名稱(chēng) -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 渲染區(qū)域-->
<router-view></router-view>
</div>
<script>
//定義兩個(gè)模塊
var Foo = {
template: '<div>foo</div>'
}
var Bar = {
template: '<div>bar</div>'
}
//配置路由
var routes = [{
name:"foo",
path: '/foo',
component: Foo
},
{
name:"bar",
path: '/bar',
component: Bar
}]
//掛載程序
const app = new Vue({
router:new VueRouter({
routes
})
}).$mount('#app')
</script>
</body>
</html>
路由
