<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= title %></title>
<link rel="stylesheet" href="/css/style.css">
<script src="/js/vue.min.js"></script>
<script src="/js/vue-router.min.js"></script>
</head>
<body>
<h1>Vue Router</h1>
<div id="box">
<router-link to="/home">Home</router-link>
<router-link to="/news">News</router-link>
<div>
<router-view></router-view>
</div>
</div>
</body>
</html>
<script>
// define component
const Home = {
template: '<h2>I am the homepage</h2>'
}
const News = {
template: '<h2>I am the newspage</h2>'
}
// define router
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News }
]
// create router instance & config routes
const router = new VueRouter({
routes
// routes: routes
})
const app = new Vue({
router
}).$mount('#box')
</script>
点击 Home 标签
点击 News 标签
通过开发者工具可以看到，router-link 标签被解析成了a标签， router-view 标签被 组件的模板内容替换。
当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active。
参考：http://router.vuejs.org/zh-cn/essentials/getting-started.html