15.1.2 一个简单的Vue Router的使用示例 -TypeScript和Vue从入门到精通(五)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(五)

### 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来完成。

```bash
# 使用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**

```javascript
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**

```javascript
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**

```vue
<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the home page of our Vue Router demo.</p>
  </div>
</template>

**src/components/About.vue**

```vue
<template>
  <div>
    <h1>About Page</h1>
    <p>This is the about page. Learn more about our Vue Router demo.</p>
  </div>
</template>

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

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

**src/App.vue**

```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>

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

#### 15.1.2.6 运行并测试

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

```bash
# 使用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应用。

该分类下的相关小册推荐：

Vue3技术解密

Vue.js从入门到精通(三)

Vue原理与源码解析

TypeScript和Vue从入门到精通(一)

TypeScript和Vue从入门到精通(四)

Vue源码完全解析

TypeScript和Vue从入门到精通(二)

VUE组件基础与实战

Vue面试指南

移动端开发指南

Vue.js从入门到精通(四)

Vue.js从入门到精通(一)