Question

我想为我的应用程序的部分提供几个“概述”页面，所有页面都将在该部分的根上触发。

所以localhost/hi应该显示组件HiOverview

localhost/he应该显示组件HeOverview

因为其中有多个，我想避免将组件分配给const，然后在路由中重用它。相反，我想在一个动态路由中处理所有这些。

但是我正在努力在beforeEnter钩子中创建组件。每个route对象都需要一个组件...但是我只想根据路由决定该组件。（sectionsWithOverview是一个简单的字符串数组，其中包含name条要显示概览的路线

const router = new Router({
  linkActiveClass: 'active',
  mode: 'history',
  routes: [
    { path: '/:section',
      component: Placeholder,
      beforeEnter: (to, from, next) => {
      const section = to.params.section

      // how can i use this in the next() call?   
      // const View = () => import(/* webpackChunkName: 'sectionView' */ `Components/${section}/${section}Overview`)

      if (sectionsWithOverview.includes(to.params.section)) {
        next({ name: `${to.params.section}Overview` })
      } else {
        next()
      }
    },
}

你们能帮我吗？我如何有条件地在onBeforeEnter上分配组件，然后路由到该确切的组件？如果我事先声明每个SectionOverview，它就会起作用，但这使我的整个想法变得毫无意义。

感谢您的帮助：）

Answer 1

我在一个项目中做了类似的事情，但是我使用了beforeRouteUpdate

以下是其工作方式的一个示例。在route.js上，只需定义您的动态路由

const router = new Router({
  linkActiveClass: 'active',
  mode: 'history',
  routes: [
    { 
      path: '/:section',
      component: Placeholder,
      name: 'placeholder'
    },
}

然后在HTML的组件中（假定为Placeholder.vue）添加以下代码行

<transition name="fade" mode="out-in">
    <component :is="section" key="section"></component>
</transition>

然后在您的JS中添加beforeRouteUpdate钩子，并定义与路由部分参数匹配的所有组件。

import he from './heOverview.vue'
import hi from './hiOverview.vue'

beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.section = to.params.section
  next()
},
components: {
  he,
  hi
},
data () {
  return {
    section: ''
  }
}

因此，当用户导航到localhost/he时，heOverview.vue组件将被加载。您唯一需要确保的是，section参数的值应该匹配特定的视图，否则将不会产生错误

如果您需要有关此工作原理的更多信息，请阅读 https://vuejs.org/v2/guide/components-dynamic-async.html https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards

基于路由的动态路由和组件创建

1 个答案: