一 锚点的概念
案例：百度百科
特点：单页Web应用，预先加载页面内容
形式：url#锚点
二 路由的作用
Vue.js 路由允许我们通过锚点定义不同的 URL， 达到访问不同的页面的目的，每个页面的内容通过延迟加载渲染出来。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）
三 路由实例
创建文件夹router_pro
1 复制js资源
vue.min.js
vue-router.min.js
2 创建 路由.html，我们的代码都写在这个文件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 路由定义 -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<!-- 通过 to 属性指定链接 -->
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<!-- 引入js -->
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
<script>
// 定义视图组件
// 复杂的组件也可以从独立的vue文件中引入
const Welcome = { template: '<div>欢迎</div>' }
const Student = { template: '<div>会员列表</div>' }
const Teacher = { template: '<div>讲师列表</div>' }
// 定义路由
// 每个路由应该映射一个组件
const routes = [
{ path: '/', redirect: '/welcome' }, //设置默认指向的路径
{ path: '/welcome', component: Welcome },
{ path: '/student', component: Student },
{ path: '/teacher', component: Teacher }
]
// 创建 router 实例，然后传 routes 配置
const router = new VueRouter({
routes //（缩写）相当于 routes: routes
})
// 创建和挂载根实例，从而让整个应用都有路由功能
new Vue({
el: '#app',
router
})
</script>
</body>
</html>3 测试结果
557
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
