安装Vue Router库-安装完-如果你需要更复杂的路由结构还可以使用动态路由和嵌套路由

作者：编程小白 | 发布时间：2025-06-20 |

一、安装Vue Router库

在使用Vue Router之前，先得把它装上。你可以用npm或者yarn来安装，命令如下：

npm install vue-router@4

如果你用的是Vue 2，那么命令是这样的：

yarn add vue-router

二、在项目中配置Router

安装完Vue Router后，要在你的项目中配置它。在项目根目录下创建一个名为 router 的文件夹，然后在这个文件夹里创建一个名为 index.js 的文件。在这个文件里配置你的路由：

import { createRouter, createWebHistory } from 'vue-router'



import Home from '../views/Home.vue'



import About from '../views/About.vue'







const routes = [



  { path: '/', name: 'home', component: Home },



  { path: '/about', name: 'about', component: About }



]







const router = createRouter({



  history: createWebHistory(process.env.BASE_URL),



  routes



})







export default router

三、定义路由组件

在配置路由的过程中，你可能需要定义一些组件。比如，在 views 文件夹里创建 Home.vue 和 About.vue 两个组件：

// Home.vue

四、在Vue实例中使用Router

创建Vue实例时，要把路由器实例传递给Vue应用。打开 main.js 文件，并进行如下修改：

import { createApp } from 'vue'



import App from './App.vue'



import router from './router'







const app = createApp(App)







app.use(router)







app.mount('app')

五、在模板中使用路由链接和视图

为了在模板中使用路由链接和视图，你需要使用 router-link 和 router-view 组件。比如，在 App.vue 中：

六、动态路由和嵌套路由

Vue Router还支持动态路由和嵌套路由。动态路由允许你在路径中使用参数，嵌套路由则允许你在父路由中定义子路由。比如：

const routes = [



  { path: '/user/:id', name: 'user', component: User },



  { path: '/user/:id/posts', name: 'user-posts', component: UserPosts }



]

在组件中，你可以通过 this.$route.params.id 访问路径参数。

嵌套路由的例子：

{ path: '/user/:id', component: User, children: [



  { path: 'profile', component: UserProfile },



  { path: 'posts', component: UserPosts }



] }

在模板中，你可以这样使用嵌套路由：

用户123

你就可以在Vue.js项目中使用Vue Router了。主要步骤包括：安装Vue Router库、配置路由、定义路由组件、在Vue实例中使用Router、以及在模板中使用路由链接和视图。如果你需要更复杂的路由结构，还可以使用动态路由和嵌套路由。