Vue3 如何安装 router？

terry 6小时前阅读数 5 #Vue

文章标签 router

在 Vue3 的项目开发中，安装 router 是一项基础且重要的操作，下面我们就来详细了解一下 Vue3 安装 router 的过程。

准备工作

你需要确保已经搭建好了 Vue3 的项目环境，可以使用 Vue CLI 或者 Vite 等工具来创建项目，如果还没有安装这些工具，要先进行安装，比如使用 Vue CLI 的话，通过 npm 或者 yarn 进行全局安装：

npm install -g @vue/cli 或者 yarn global add @vue/cli 。

安装 Vue Router

接下来就是安装 Vue Router 了，在项目的根目录下，打开终端（命令行工具），如果你的项目是使用 npm 管理依赖的，执行命令：npm install vue-router@4 ，这里指定安装 4 版本是因为 Vue3 对应的 Vue Router 版本是 4 ，如果是使用 yarn ，则执行：yarn add vue-router@4 。

安装完成后,在项目的 package.json 文件中会看到 vue-router 的相关依赖信息。

配置 Router

（一）创建路由文件

一般在项目的 src 目录下创建一个 router 文件夹，然后在这个文件夹里新建一个 index.js 文件（当然你也可以根据自己的习惯命名）。

### （二）编写路由配置

在 index.js 文件中，首先要引入 Vue Router 和相关的组件。

```javascript import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' import About from '../views/About.vue' ```

这里假设项目中有 Home 和 About 两个组件，分别放在 views 文件夹下，然后定义路由数组：

```javascript const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] ```

每个路由对象包含 path（路由路径）、name（路由名称，方便在代码中引用）和 component（对应的组件）。

### （三）创建 Router 实例

接着创建 Router 实例：

```javascript const router = createRouter({ history: createWebHistory(), routes }) ```

这里使用 createWebHistory 来创建浏览器历史模式的路由（还有 createWebHashHistory 哈希模式等，可根据项目需求选择）。

### （四）导出 Router 实例

最后将 router 实例导出：

```javascript export default router ```

在 Vue 项目中使用 Router

（一）在 main.js 中引入并使用

在项目的 main.js 文件中，引入刚刚创建的 router ：

```javascript import { createApp } from 'vue' import App from './App.vue' import router from './router'

const app = createApp(App) app.use(router) app.mount('#app')

<p>这样就把 router 安装并配置到 Vue 项目中了。</p>
### （二）在组件中使用路由
<p>在组件中，比如在 Home 组件里，如果有一个按钮要跳转到 About 页面，可以这样写：</p>
```html
<template>
  <button @click="goToAbout">Go to About</button>
</template>
<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push('/about')
    }
  }
}
</script>

或者使用路由链接组件：

```html ```

常见问题及解决

（一）路由跳转后页面不更新

有时候会遇到路由跳转了,但页面内容没有更新的情况，这可能是因为组件的缓存问题，可以在 router-view 上添加 keep-alive 并设置相应的 include 或 exclude 来控制缓存。

```html ``` ### （二）路由参数传递问题

如果要传递参数,比如动态路由：

```javascript const routes = [ { path: '/user/:id', name: 'User', component: User } ] ```

在跳转时：

```javascript this.$router.push({ path: `/user/${userId}` }) ```

在 User 组件中获取参数：

```javascript export default { setup(props) { const id = props.route.params.id return { id } } } ```

通过以上步骤,我们就完成了 Vue3 中 router 的安装、配置和基本使用，在实际项目中，还会涉及到更多复杂的路由功能，比如嵌套路由、路由守卫等，但掌握了基本的安装和配置方法，就为后续的开发打下了良好的基础，希望这篇文章能帮助你顺利在 Vue3 项目中安装和使用 router ，让你的项目开发更加高效和便捷。