<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// 声明组件
var Fe={
template:`
<div>我是前端</div>
`
}
var Be={
template:`
<div>我是后端</div>
`
}
<!-- //创建路由对象 -->
var router=new VueRouter({
routes:[
{path:"/frontEnd",
component:Fe,
<!-- 命名路由 -->
name:"frontEnd"
},
{path:"/backEnd",
component:Be,
<!-- 命名路由 -->
name:"backEnd"
}
]
})
var App={
template:`
<div>
<!-- router被渲染成a元素，to渲染成href属性 -->
<router-link :to="{name:'frontEnd'}">前端</router-link>
<router-link :to="{name:'backEnd'}">后端</router-link>
<!-- //路由的试图 -->
<router-view></router-view>
</div>
`
}
//router挂载到实例上
new Vue({
el:"#app",
router,
template:`
<App/>
`,
components:{
App
}
})
</script>
</body>
</html>