在前端开发中，路由控制是非常重要的一部分，它可以实现页面的切换和导航。Vue Router 是 Vue.js 官方提供的路由管理插件，它为我们提供了一种简洁的方式来管理应用的路由，并且可以实现动态的加载和切换页面。
安装和基本配置
首先，我们需要安装 Vue Router。可以通过 npm 或者 yarn 进行安装：
npm install vue-router
在 Vue 项目的 src 目录下创建一个 router 文件夹，并在该文件夹下创建一个名为 index.js 的文件。在该文件中，我们可以进行 Vue Router 的基本配置。
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history', //使用 history 模式，可以去掉 URL 中的 #
routes: [
//路由配置
]
});
export default router;
在上述代码中，我们首先引入了 Vue 和 VueRouter，并通过 Vue.use(VueRouter) 来启用插件。然后，创建了一个 VueRouter 的实例，并通过 mode 设置路由的模式。routes 是一个路由配置的数组，我们可以在其中定义每一个路由的路径、组件等信息。
路由配置
在路由配置中，我们可以定义多个路由信息，并为其指定相应的组件。
例如，我们有两个页面，一个是首页（Home），一个是关于页面（About）。
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
}
];
在上述代码中，我们首先引入了 Home 和 About 两个组件，然后在路由配置中定义了两个路由信息。path 是路由的路径，name 是路由的名称，component 是对应的组件。
懒加载
在实际开发中，我们的页面往往比较复杂，组件也比较多，如果一次性加载所有组件的话，会影响页面加载速度。Vue Router 提供了懒加载的方式，可以在需要的时候才进行组件的加载。
const routes = [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue')
},
{
path: '/about',
name: 'About',
component: () => import('@/views/About.vue')
}
];
在上述代码中，我们使用了箭头函数的方式，并通过 import() 的方式来实现组件的懒加载。
路由跳转
使用 Vue Router，我们可以通过不同的方式来实现路由的跳转。
- 使用
router-link组件进行导航
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
在上述代码中，我们分别创建了两个导航链接，点击链接可以跳转到对应的路由路径。
- 使用编程式导航
// 在 Vue 实例中使用
this.$router.push('/') //跳转到首页
this.$router.push('/about') //跳转到关于页面
// 在组件中使用
this.$router.push('/') //跳转到首页
this.$router.push('/about') //跳转到关于页面
通过 $router.push() 方法，可以进行路由的跳转。在 Vue 实例中可以直接使用 $router，在组件中可以通过 this.$router 来进行导航。
路由参数
有时候，我们需要在路由之间传递一些参数。Vue Router 允许我们通过路由的路径中添加参数来实现。
const routes = [
{
path: '/user/:id',
name: 'User',
component: User
}
];
在上述代码中，我们定义了一个名为 User 的路由，并通过 :id 的形式来定义了一个参数。在实际使用中，可以通过 /user/123 的形式来传递参数。
在组件中可以通过 $route.params 来获取参数的值：
export default {
mounted() {
console.log(this.$route.params.id); //输出参数值
}
}
以上就是 Vue Router 路由配置的基本实现方法。通过合理的路由配置，我们可以轻松实现页面的切换和导航。希望本文能对你理解和使用 Vue Router 有所帮助！
本文来自极简博客，作者：智慧探索者，转载请注明原文链接：Vue Router路由配置实现
