vue.js - Vue.js中如何实现n级嵌套动态路由？

Question

我想在 Vue.js 中实现 n 级动态嵌套路由，其中​​ n 对我来说是未知的。例如 -

abc.com/ctx-path/component/1/2/...../n

其中 1,2,...n 是级别

如何使用 Vue-router 实现这一点？

Answer 1

在幕后 vue-router 路径匹配使用path-to-regexp。所以应该可以写这样的东西

{ path: '/ctx-path/component/:id+', component: Component }

或者

{ path: '/ctx-path/component/:id*', component: Component }

您也可以在运行时动态添加路径，但您需要有一个触发器来添加它。

最后一个选择是有一条全部路线并添加您自己的逻辑。

Answer 2

这是来自文档：

const router = new VueRouter({
    routes: [
        { path: '/user/:id', component: User,
            children: [
                {
                // UserProfile will be rendered inside User's <router-view>
                // when /user/:id/profile is matched
                path: 'profile',
                component: UserProfile
                },
                {
                // UserPosts will be rendered inside User's <router-view>
                // when /user/:id/posts is matched
                path: 'posts',
                component: UserPosts
                }
            ]
       }
   ]
})

见链接https://router.vuejs.org/guide/essentials/nested-routes.html

Answer 3

双动态嵌套路由通过嵌套 URL 参数过滤单个视图

const routes = [
  {
    path: '/category/:categoryId',
    name: 'category',
    component: () =>
      import(/* webpackChunkName: "product" */ '../views/Categories.vue'),
    props: (route: Route) => ({
      categoryId: route.params.categoryId,
    }),
  },
  {
    path: '/category/:categoryId/:attributeIdsJsonString',
    name: 'attributeFilter',
    component: () =>
      import(/* webpackChunkName: "product" */ '../views/Categories.vue'),
    props: (route: Route) => ({
      categoryId: route.params.categoryId,
      attributeIdsJsonString: route.params.attributeIdsJsonString,
    }),
  },
];

const router = new VueRouter({
  routes,
});

像这样使用不同的路由名称将意味着beforeRouteUpdate在某些情况下不会触发，所以也要beforeRouteEnter使用