使用动态路由搭建基本单页应用程序
步骤：
1.导航组件，其实就是a标签
2.渲染路由匹配的组件内容
3.定义组件
4.定义路由列表
5.实例路由器
6.实例Vue，添加路由信息
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用Vue-Router路由制作单页程序</title>
<script src="../../js/vue.js"></script>
<script src="../../js/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>使用Vue-Router路由制作单页程序</h1>
<div>
<!-- 导航组件，其实就是a标签 -->
<router-link to="/stu">学生列表</router-link>
<router-link to="/tea">老师列表</router-link>
</div>
<div>
<!-- 渲染路由匹配的组件内容 -->
<router-view></router-view>
</div>
</div>
<script>
// 定义组件
const Student = { template: "<h3>学生列表组件</h3>" }
const Teacher = { template: "<h3>老师列表组件</h3>" }
// 定义路由列表
const routers = [
{path:"/stu",component:Student},
{path:"/tea",component:Teacher}
];
// 实例路由器
var router = new VueRouter({
routes: routers
})
// 实例Vue，添加路由信息
const app = new Vue({
el: "#app",
router//等价于routes: routers
})
</script>
</body>
</html>
路由关系如下图
path：路径
router：路由对象（routes：router时写router即可）
routes：表示路由列表
<router-link to="/stu">学生列表</router-link>：定义导航组件
<router-view></router-view>：渲染路由匹配的组件内容 默认显示第一个路由匹配的组件