Vue中安装路由，轻松上手！_安装完成后_现在你可以在Vue组件中使用路由了

作者：机器人技术佬 | 发布时间：2025-07-09 |

Vue中安装路由，轻松上手！

在Vue中安装路由其实超级简单，主要就三个步骤：安装插件、配置文件、应用路由。

一、安装Vue Router插件

Vue Router是Vue.js的官方路由管理器，通过npm来安装它。在终端里运行以下命令：

npm install vue-router

安装完成后，你会在项目的node_modules文件夹里看到vue-router目录，这就说明安装成功了。

二、创建路由配置文件

在项目的src文件夹下，创建一个名为router.js（或其他名字）的新文件。在这个文件里，我们定义路由规则：

import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home.vue' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'home', component: Home } ] })

三、在Vue实例中使用路由配置

在main.js文件中，引入我们刚刚创建的路由配置，并将其注入到Vue实例中：

import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ el: '#app', router, render: h => h(App) })

四、在组件中使用路由

使用组件实现导航

在需要导航的组件中，我们可以使用组件来创建链接：

<router-link to="/about">About</router-link>

组件会自动渲染为一个标签，并且会处理点击事件来实现路由导航。

使用组件显示路由组件

在需要显示路由组件的地方，使用组件：

<router-view></router-view>

组件会根据当前的路由，渲染对应的组件。

五、动态路由和嵌套路由

动态路由

动态路由允许我们为同一个路由路径定义多个组件，例如：

path: '/user/:id', name: 'user', component: User, props: true

在组件中，可以通过this.$route.params.id来获取动态路径参数。

嵌套路由

嵌套路由允许我们在一个路由中嵌套另一个路由，例如：

path: '/user/:id', component: User, children: [ { path: 'profile', name: 'user-profile', component: UserProfile }, { path: 'posts', name: 'user-posts', component: UserPosts } ]

在组件中，通过组件来显示嵌套路由的组件。

六、路由守卫

Vue Router提供了一些钩子函数，可以在路由导航时执行一些操作，这些钩子函数被称为路由守卫。例如，全局守卫：

router.beforeEach((to, from, next) => { // ... })

这里有三种守卫：全局守卫、路由独享守卫、组件内守卫。

七、总结

通过以上步骤，我们在Vue项目中成功安装并配置了路由。核心步骤包括：安装Vue Router插件、创建路由配置文件、在Vue实例中使用路由配置。我们还介绍了动态路由、嵌套路由以及路由守卫等高级功能。

建议你结合项目需求，灵活使用这些路由功能，并定期查看Vue Router的官方文档，以获取最新的功能和最佳实践。

Vue中安装路由，轻松上手！_安装完成后_现在你可以在Vue组件中使用路由了