<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Title</title>
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="box">
<router-link to="/index">首页</router-link>
<router-link to="/content">内容</router-link>
<router-view></router-view>
</div>
<script type="text/javascript">
let index = {
template:'<h1>这是首页</h1>',
};
let content = {
template:'<h1>这是内容页</h1>',
};
let routes = [
{path: '/', redirect: '/index'},//定义的初始路由路径
{path:'/index',component:index},
{path:'/content',component:content},
];
let router = new VueRouter({routes});
var app = new Vue({
el:'#box',
router:router
});
</script>
</body>
</html>