一、认识路由
1、锚点的概念
案例：百度百科
特点：单页Web应用，预先加载页面内容
形式：url#锚点
2、路由的作用
Vue.js 路由允许我们通过锚点定义不同的 URL， 达到访问不同的页面的目的，每个页面的内容通过延迟加载渲染出来。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）
3、参考
二、路由实例
1、创建文件夹和文件
创建文件夹 07-router，创建index.html
2、复制js资源
vue.js
vue-router.js
3、引入js
<script src="vue.js"></script>
<script src="vue-router.js"></script>
4、编写html
<div id="app">
<p>人物介绍-张小斐</p>
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<!-- 通过传入 `to` 属性指定链接. -->
<router-link to="info">基本信息</router-link>
<router-link to="yyjl">演艺经历</router-link>
<router-link to="zyzp">主要作品</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
5、编写js
<body>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
// 1、定义组件模板
// 复杂的组件也可以从独立的vue文件中引入
const info = { template: '<div>张小斐 30岁 女 喜剧演员</div>' }
const yyjl = { template: '<div>相声 小品 演员</div>' }
const zyzp = { template: '<div>《你好，李焕英》</div>' }
// 2、定义路由列表
// 每个路由应该映射一个组件。
const routes = [
{ path: '/info', component: info },
{ path: '/yyjl', component: yyjl },
{ path: '/zyzp', component: zyzp },
]
// 3、创建路由对象，// （简写）相当于 routes: routes
const router = new RouterView({ routes })
// 4、挂载路由对象，让整个应用都有路由功能
new Vue({
el: '#app',
router,
})
</script>
</body>
5837
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
