3. Vue Router

一、认识路由

1、锚点的概念

案例:百度百科

特点:单页Web应用,预先加载页面内容

形式:url#锚点

2、路由的作用

Vue.js 路由允许我们通过锚点定义不同的 URL, 达到访问不同的页面的目的,每个页面的内容通过延迟加载渲染出来。

通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)

3、参考

https://router.vuejs.org/zh/

二、路由实例

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 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: '
张小斐 30岁 女 喜剧演员
'
} const yyjl = { template: '
相声 小品 演员
'
} const zyzp = { template: '
《你好,李焕英》
'
} // 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>

你可能感兴趣的:(Vue.js,vue)