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 }

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

最后一个选择是拥有一个catch all route并添加自己的逻辑。

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

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

3 个答案: