vue动态路由和静态结合

在Vue中，可以使用动态路由和静态路由结合来创建灵活和可扩展的路由配置。

动态路由是指路由路径中包含参数的路由。可以使用`:`来定义动态路由参数。例如，`/user/:id`定义了一个名为`id`的动态路由参数。

静态路由是指路由路径是固定的，没有参数的路由。

下面是一个示例，演示了如何在Vue中结合使用动态路由和静态路由：

// router.js

import Vue from "vue";
import Router from "vue-router";

import Home from "@/views/Home.vue";
import User from "@/views/User.vue";
import UserProfile from "@/views/UserProfile.vue";
import UserSettings from "@/views/UserSettings.vue";
import NotFound from "@/views/NotFound.vue";

Vue.use(Router);

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      component: Home
    },
    {
      path: "/user",
      component: User,
      children: [
        {
          path: "",
          component: UserProfile
        },
        {
          path: "settings",
          component: UserSettings
        }
      ]
    },
    {
      path: "/user/:id",
      component: UserProfile
    },
    {
      path: "*",
      component: NotFound
    }
  ]
});

在上面的示例中，我们定义了以下路由：

- `/` - 静态路由，对应Home组件。
- `/user` - 静态路由，对应User组件。同时，该路由下还有两个子路由：
- `/user` - 静态路由，对应UserProfile组件。
- `/user/settings` - 静态路由，对应UserSettings组件。
- `/user/:id` - 动态路由，对应UserProfile组件。`:id`是动态参数，可以在组件中通过`$route.params`访问。
- `*` - 匹配所有其他路径的路由，对应NotFound组件。

通过结合使用动态路由和静态路由，可以创建出灵活的路由配置，满足不同的场景需求。