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

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

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

  <script src="https://unpkg.com/vue-router@4"></script>

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

例程1 myroute.html

    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>

    <!-- 或者使用下载到本地的JS文件
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    -->

    <div id="app">
      <p>
        <!-- 设置导航链接 -->
        <router-link to="/">主页</router-link> |
        <router-link to="/about">关于我们</router-link>
      </p>

      <!-- 插入与路由匹配的组件 -->
      <router-view></router-view>
    </div>

    <script>
      //定义组件
      const HomeComponent = { template: '<div>这是主页</div>' }
      const AboutComponent = { template: '<div>这是我们的介绍</div>' }

      // 定义组件的路由
      const myroutes = [
        { path: '/', component: HomeComponent },
        { path: '/about', component: AboutComponent },
      ]

      //创建路由管理器router实例
      const router = VueRouter.createRouter({
        //设置hash路由模式
        history: VueRouter.createWebHashHistory(),
        //设置路由
        routes: myroutes  
      })

      const app = Vue.createApp({})
      app.use(router)       //使用路由管理器
      app.mount('#app')
    </script>

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

   <router-link to="/">主页</router-link> |
   <router-link to="/about">关于我们</router-link>

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

<a href="#/" >主页</a> |
<a href="#/about" >关于我们</a>

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

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

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

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

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

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

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

图1 myroute.html的网页

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