Vue Router 介绍

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式，在 IE9 中自动降级
  • 自定义的滚动条行为

路由的作用

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

通过 Vue.js 可以实现多视图的单页 Web 应用（single page web application，SPA）

路由实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

  <div id="app">
    <h1>人物介绍-贾玲</h1>
    <p>
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <router-link to="/xx">基本信息</router-link>
      <router-link to="/jl">演艺经历</router-link>
      <router-link to="/zp">主要作品</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>

  <script>
    // 1. 定义（路由）组件。
    // 复杂的组件也可以从独立的vue文件中引入
    const jbxx = { template: '<div>贾玲 女 喜剧演员</div>' }
    const yyjl = { template: '<div>小品 电影 综艺</div>' }
    const zyzp = { template: '<div>《你好 李焕英》</div>' }

    // 2. 定义路由
    // 每个路由应该映射一个组件。
    // path和上面的 router-link to 对应
    // component和const定义的名字对应
    const routes = [
      { path: '/xx', component: jbxx },
      { path: '/jl', component: yyjl },
      { path: '/zp', component: zyzp },
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
      routes, // （缩写）相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 从而让整个应用都有路由功能
    new Vue({
      el: '#app',
      router,
    })

    // 现在，应用已经启动了！
  </script>
</body>