Vue Router概述
Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，让构建单页应用变得易如反掌。它包含的功能有：
-
嵌套的路由、视图表。
-
模块化的、基于组件的路由配置。
-
路由参数、查询、通配符。
-
基于
Vue.js过渡系统的视图过渡效果。 -
细粒度的导航控制。
-
带有自动激活的 CSS class 的链接。
-
HTML 5 历史模式或哈希模式。
-
自定义的滚动条行为。
安装 Vue Router
与安装 Vuex 方法相同，在 HTML 页面中，通过 <script> 标签的方式导入 Vue Router，前提是必须要先导入 Vue.js，如示例代码 7-2-1 所示。
<script src="https://unpkg.com/vue@3.2.28/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4.0.11/dist/vue-router.global.js"></script>当然，可以将这个链接指向的 JavaScript 文件下载到本地计算机中，再从本地计算机导入即可。
在使用 Vue Router 开发大型项目时，推荐使用 npm 方式来安装。npm 工具可以很好地和诸如 Webpack 或 Browserify 等模块打包器配合使用。安装方法如示例代码 7-2-2 所示。
npm install vue-router@4一个简单的组件路由
在 Vue 项目中，使用路由的基本目的就是为了实现页面之间的切换。正如前面章节所述，在单页应用中的页面切换主要是控制一个容器 <div> 的内容，替换、显示或隐藏。下面就用 Vue Router 来控制一个 <div> 容器的内容切换进行演示，如示例代码7-2-3所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>vue-router</title>
<script src="https://unpkg.com/vue@3.2.28/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4.0.11/dist/vue-router.global.js"></script>
<style type="text/css">
#app {
text-align: center;
line-height: 2;
}
</style>
</head>
<body>
<!--根实例挂载的 DOM 对象 app-->
<div id="app">
<p>
<router-link to="/page1">导航 page1</router-link>
<router-link to="/page2">导航 page2</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
// 创建 page1 的局部组件
const PageOne = {
template: '<div>PageOne</div>'
}
// 创建 page2 的局部组件
const PageTwo = {
template: '<div>PageTwo</div>'
}
// 配置路由信息
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(), // 路由模式
routes: [
{ path: '/page1', component: PageOne },
{ path: '/page2', component: PageTwo }
]
})
const app = Vue.createApp({})
app.use(router)
app.mount("#app")
</script>
</body>
</html>上面的代码是完整的演示代码，可以直接在浏览器中打开。VueRouter.createRouter 方法可以创建路由对象，其中 routes 表示每个路由的配置，history 表示路由模式，在 Vue Router 4 中是必传的，调用 app.use(router) 即可使用路由。
<router-view> 组件是 vue-router 内置的组件，就相当于一个容器 <div>。<router-link> 组件是 vue-router 内置的导航组件，routes 对应的数组是路由配置信息。当我们单击第一个 <router-link> 组件时，会动态改变浏览器的哈希，根据配置的路由信息，当哈希值为 page1 时，便命中了 path: '/page1' 规则，这时 <router-view> 的内容就被替换成了 PageOne 组件，以此类推，PageTwo 组件也是如此。这个代码段的运行效果如图7-1所示。
这就是所谓的组件路由，把组件类比成页面，每个页面默认是一个组件，当页面的哈希切换到某个路径时，就会匹配到对应的组件，然后将容器的 div 内容替换成这个组件，就实现了页面的切换，这是 vue-router 基本的使用方法。当然，路由配置信息可以支持多种方式，如常用的动态路由匹配。