路由用于单页面应用的模拟跳转
<!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标签代表a标签 -->
<!-- to属性指定路径显示名称 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 渲染区域-->
<router-view></router-view>
</div>
<script>
//定义两个模块
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>
路由
