vue动态路由

动态路由是指通过占位符来匹配动态的URL路径，根据路径的不同来动态的渲染组件。在 Vue 中，我们可以通过 vue-router 来实现动态路由。下面是一个使用 Vue Router 实现动态路由的示例：

// router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ './views/Home.vue')
  },
  {
    path: '/blog/:id',  // 动态路径参数
    name: 'Blog',
    component: () => import(/* webpackChunkName: "blog" */ './views/Blog.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在上面的代码中，我们定义了两个路由，/ 和 /blog/:id。其中，/blog/:id 是一个动态路由，id 是一个占位符，表示动态的路径参数。

在组件中，我们可以通过 $route.params 获取动态路由中的参数，如下所示：

<!-- Blog.vue -->

<template>
  <div>
    <h1>{{ $route.params.id }}</h1>
    <!-- ... -->
  </div>
</template>

<script>
export default {
  // ...
}
</script>

在上面的示例中，我们通过 $route.params.id 获取了动态路由的参数，并将它渲染到模板中。

当使用动态路由时，Vue Router 会将匹配到的组件实例化、销毁、重用等操作都进行了优化，从而提高了应用的性能和用户体验

vue路由传参

在 Vue 3 中使用 Vue Router 进行路由传参有两种方式：

使用路由参数

使用路由参数直接在路由路径中添加参数。在组件中，通过 $route.params 获取路由参数。下面是一个示例：

// router.js

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import Post from './views/Post.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/post/:id',
    name: 'Post',
    component: Post
  }
];

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

export default router;

在上面的代码中，我们定义了一个 /post/:id 的路由，其中 :id 表示动态的路由参数。

<!-- Post.vue -->

<template>
  <div>
    <h2>{{ $route.params.id }}</h2>
  </div>
</template>

在组件中，我们可以通过 $route.params 来获取路由参数

使用查询参数

查询参数可以在路由路径后面添加 ?，然后通过 key=value 的形式传递参数。在组件中，通过 $route.query 获取查询参数。下面是一个示例：

// router.js

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/post',
    name: 'Post',
    component: Post
  }
];

// 在 Post 组件中添加 query 属性
router.push({ name: 'Post', query: { id: '123' }});

在上面的代码中，我们在 Post 组件中添加了 query 属性来传递参数。在组件中可以通过 $route.query.id 来获取 id 参数。

<!-- Post.vue -->

<template>
  <div>
    <h2>{{ $route.query.id }}</h2>
  </div>
</template>

在上面的代码中，我们可以通过 $route.query.id 来获取查询参数中的 id 参数。

可以看到，使用路由参数和查询参数的主要区别在于传递参数的方式，路由参数直接添加到路由路径中，而查询参数则添加到路由路径后面的 ? 后，并以 key=value 的形式传递参数。在组件中，通过 $route.params 来获取路由参数，通过 $route.query 来获取查询参数。