孙卫琴的《精通Vue.js》读书笔记-路由管理器的基本用法

本文参考孙卫琴，杜聚宾所创作的 <<精通Vue.js: Web前端开发技术详解>>一书

对于路由很复杂的应用，使用Vue Router可以简化对路由的管理，让源代码更加简洁、逻辑分明，而且容易进行模块化的开发。
在例程1的myroute.html中，引入了Vue Router插件：

  
1

myroute.html通过Router路由管理器来管理路由，为HomeComponent组件和AboutComponent组件设定了路由。当用户在网页上选择特定的链接，路由管理器就会显示相应的组件。

例程1 myroute.html

    
    

    

    

      

        
        主页 |
        关于我们
      

      
      
    

    
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

在myroute.html中，根组件模板中的组件和组件都来自于Router路由管理器。组件用来生成导航链接：

   主页 |
   关于我们
1
2

以上代码渲染后的结果为：

主页 |
关于我们
1
2

根组件模板中的组件会根据当前的路由显示相应的组件。假如用户访问的URL为“myroute.html#/about”，那么组件就会显示相应的AboutComponent组件。组件可以放置在模板的任意位置，相当于一个占位标记，实际要显示的组件会被插入到组件所在的位置。

在myroute.html的JavaScript脚本中创建了一个路由管理器实例router：

const router = VueRouter.createRouter({
  //设置hash路由模式
  history: VueRouter.createWebHashHistory(),
  //设置路由
  routes: myroutes  
})
1
2
3
4
5
6

路由管理器的history属性指定路由模式，本章11.4节会进一步介绍路由模式的概念。路由管理器的routes属性指定路由，即网页中待显示的各个组件和链接的对应关系。

Vue应用实例的use(router)函数使得路由管理器会对应用进行路由管理：

const app = Vue.createApp({})
app.use(router)       //使用路由管理器
app.mount('#app')
1
2
3

通过浏览器访问myroute.html，会得到如图1所示的网页。

图1 myroute.html的网页

在myroute.html网页上选择“主页”或“关于我们”的链接，路由管理器就会根据它的routes属性所设定的路由，显示相应的HomeComponent组件或AboutComponent组件。