Vue路由：动态路由（参数）

让我们一起走向未来

🎓作者简介：全栈领域优质创作者
🌐个人主页：百锦再@新空间代码工作室
📞工作室：新空间代码工作室（提供各种软件服务）
💌个人邮箱：[15045666310@163.com]
📱个人微信：15045666310
🌐网站：https://meihua150.cn/
💡座右铭：坚持自己的坚持，不要迷失自己！要快乐

---

1. Vue Router 概述

Vue Router 简介

Vue Router 是 Vue.js 官方的路由管理器，用于在单页应用（SPA）中进行页面的路由跳转与状态管理。它可以帮助你在一个应用中实现不同视图之间的切换，同时保持页面状态，不需要重新加载整个页面。Vue Router 在 Vue.js 应用中充当了一个核心角色，负责将用户的 URL 与应用内部的视图进行映射。

Vue Router 的基本功能包括：

• 路由的定义与跳转
• 动态路由与参数化路由
• 路由守卫与导航控制
• 路由的懒加载与性能优化

Vue Router 的工作原理

Vue Router 基于 Vue 的响应式机制，监听 URL 的变化，当 URL 发生变化时，会根据路由配置重新渲染相应的视图组件。在 Vue Router 中，路由由 path（路径）和 component（视图组件）组成，组件会根据 URL 的变化动态渲染。

当你在浏览器地址栏中输入一个 URL 时，Vue Router 会匹配路由规则，并加载相应的组件进行渲染。这一过程是无刷新地完成的，用户体验极佳。

安装与配置

在 Vue 项目中使用 Vue Router，首先需要安装 Vue Router 库，并进行基础配置：

npm install vue-router

然后在 main.js 中进行 Vue Router 的初始化和挂载：

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.config.productionTip = false;

Vue.use(VueRouter);

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

const router = new VueRouter({
   
   
  routes
});

new Vue({
   
   
  render: h => h(App),
  router
}).$mount('#app');

2. 基本路由配置

简单路由配置

最简单的路由配置就是将路径 path 与视图组件 component 进行绑定。当 URL 匹配该路径时，Vue Router 会自动渲染该组件。

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

静态路由与动态路由

静态路由指的是路径固定的路由，如 /about、/home。动态路由则是带有变量的路由，可以根据传入的参数动态加载内容。

const routes = [
  {
   
    path: '/user/:id', component: UserProfile }
];