一、认识路由
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>