15.1.2 一个简单的Vue Router的使用示例

在Vue.js应用中，路由管理是一个核心功能，它允许开发者根据URL的变化来动态地渲染不同的组件。Vue Router是Vue.js的官方路由管理器，它与Vue.js深度集成，让构建单页面应用（SPA）变得简单直观。本章节将通过一个简单的示例，引导你学习如何在Vue项目中使用Vue Router来实现基本的路由功能。

15.1.2.1 安装Vue Router

在开始之前，确保你已经有一个Vue项目环境。如果没有，可以使用Vue CLI快速创建一个。安装Vue Router到你的项目中，可以通过npm或yarn来完成。

# 使用npm
npm install vue-router
# 或者使用yarn
yarn add vue-router

15.1.2.2 配置Vue Router

安装完Vue Router后，你需要在项目中配置它。通常，我们会在src目录下创建一个名为router的文件夹，并在其中创建一个index.js（或index.ts，如果你使用TypeScript）文件来配置路由。

src/router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue'; // 假设你有一个Home组件
import About from '@/components/About.vue'; // 假设你还有一个About组件
Vue.use(Router);
export default new Router({
  mode: 'history', // 使用HTML5 History模式，避免URL中的#
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

在上面的代码中，我们首先导入了Vue和Vue Router，并通过Vue.use(Router)使Vue Router成为Vue的一个插件。然后，我们创建了一个新的Router实例，指定了路由模式为history（这是为了去掉URL中的#），并定义了路由规则。每个路由规则包括路径（path）、名称（name，可选）和对应的组件（component）。

15.1.2.3 在Vue实例中使用Vue Router

配置好路由后，你需要在Vue实例中引入并使用它。这通常在main.js或main.ts文件中完成。

src/main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router'; // 引入路由配置
Vue.config.productionTip = false;
new Vue({
  router, // 将router实例注入到Vue的根实例中
  render: h => h(App),
}).$mount('#app');

在上面的代码中，我们通过import router from './router'引入了路由配置，并在创建Vue实例时通过router选项将其注入。这样，Vue实例就能够识别并使用我们定义的路由了。

15.1.2.4 创建Vue组件

接下来，你需要创建一些Vue组件，这些组件将作为路由的目标。在本例中，我们已经假设你有Home.vue和About.vue两个组件。

src/components/Home.vue

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the home page of our Vue Router demo.</p>
  </div>
</template>
<script>
export default {
  name: 'Home'
}
</script>
<style scoped>
/* 样式 */
</style>

src/components/About.vue

<template>
  <div>
    <h1>About Page</h1>
    <p>This is the about page. Learn more about our Vue Router demo.</p>
  </div>
</template>
<script>
export default {
  name: 'About'
}
</script>
<style scoped>
/* 样式 */
</style>

15.1.2.5 使用<router-view>和<router-link>

在你的Vue应用中，<router-view>是路由出口，用于渲染匹配的组件。而<router-link>则是Vue Router提供的组件，用于创建导航链接。

src/App.vue

<template>
  <div id="app">
    <h1>Vue Router Demo</h1>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style>
/* 样式 */
</style>

在上面的App.vue中，我们使用了<router-link>来创建指向/和/about的导航链接，而<router-view/>则是路由出口，Vue Router会根据当前路由渲染对应的组件。

15.1.2.6 运行并测试

现在，一切准备就绪，你可以运行你的Vue应用来测试路由是否按预期工作。

# 使用npm
npm run serve
# 或者使用yarn
yarn serve

运行上述命令后，Vue CLI会启动一个开发服务器，并在浏览器中打开你的应用。你应该能看到导航链接（Home和About），点击它们时，URL会变化，并且对应的组件会被渲染到<router-view/>中。

15.1.2.7 进阶使用

Vue Router的功能远不止于此。它还支持嵌套路由、路由守卫（导航守卫）、动态路由匹配、路由懒加载等高级功能。随着你对Vue Router的深入了解，你将能够构建更复杂、更灵活的单页面应用。

• 嵌套路由：允许你在一个路由中嵌套另一个路由，这在构建具有复杂层级结构的界面时非常有用。
• 路由守卫：允许你在路由跳转前后执行自定义逻辑，如登录验证、页面加载前数据预取等。
• 动态路由匹配：可以根据URL的不同部分动态地匹配路由，这对于构建如用户个人页面这样的动态URL非常有用。
• 路由懒加载：Vue Router支持将路由对应的组件分割成不同的代码块，以实现按需加载，从而优化应用的加载时间和性能。

通过这些进阶功能，你可以充分发挥Vue Router的潜力，构建出更加高效、易用、灵活的Vue应用。