vue动态路由

在Vue中，可以通过动态路由实现根据不同的参数值加载不同的组件或页面。Vue Router是Vue.js官方提供的路由管理器，可以用于实现动态路由。

首先，在Vue项目中安装Vue Router：

npm install vue-router --save
# 或者
yarn add vue-router

然后，在项目中创建一个路由文件（通常命名为router.js），并配置路由规则。例如：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
import Product from './views/Product.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      component: About,
    },
    {
      path: '/product/:id',
      name: 'product',
      component: Product,
    },
  ],
});

在上述代码中，我们通过导入Home、About和Product等组件，并配置了三个路由规则。其中，/表示根路径，/about表示关于页面，/product/:id表示带有动态参数的产品详情页面。

接下来，在主入口文件（通常为main.js）中引入路由文件并挂载到Vue实例上：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

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

然后，在需要使用动态路由的组件中，可以使用$route.params获取路由参数，进行相应的处理。例如，在Product.vue组件中：

<template>
  <div>
    <h1>Product Detail: {{ $route.params.id }}</h1>
    <!-- 其他组件内容 -->
  </div>
</template>

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