VueJS多个嵌套路由未通过路由器视图呈现

时间:2019-03-08 07:23:38

标签: javascript vue.js

我已经在Vue组件中进行了设置,

我的问题是,当我尝试更改其路线时,除非刷新页面,否则它不会呈现组件Goal.vue。我已经设置好了 :key以及$forceUpdate。但是,当我将其路由到this.$router.go(0);之类的自身时,它可以工作,但是它有点难看,因为它喜欢两次渲染页面。

Evaluation.vue

  <keep-alive>
      <router-view :key="$route.fullPath"></router-view>
  </keep-alive>

Dashboard.vue

    <keep-alive>
      <router-view :key="$route.fullPath" v-cloak></router-view>
    </keep-alive>

和Goal.vue

就像

+--------------------+
| Evaluation         |
| +----------------+ |
| | Dashboard      | |
| | +------------+ | |
| | |            | | |
| | |            | | |
| | |    Goal    | | |
| | |            | | |
| | +------------+ | |
| +----------------+ |
+--------------------+

这是我的路线

const ev = {
  name: "evaluate_employee",
  path: "evaluate_employee/:emp_eval_id?",
  exact: true,
  component: Evaluation,
  meta: {
    prefix: 'Evaluate Employee',
    icon: 'person',
    title: 'Evaluation - ',
    permissions: ["auth"],
    requiresAuth: false
  },
  children:[
    {
      name:'evaluating',
      path:'evaluating/:eval_id?',
      exact: true,
      component: Dashboard,
      meta: {
        prefix: 'Evaluating User - ',
        icon: '',
        title: 'Evaluating - ',
        permission:['auth'],
        requiresAuth: false
      },
      children:[
        {
          name: 'eval_goal',
          path: '', // evaluating/:eval_id?/
          exact: true,
          component: Goal,
          meta: {
            prefix: 'Performance Assessment - ',
            icon: '',
            title: 'Performance Assessment - ',
            permission: ['auth'],
            requiresAuth: false
          },
        },

      ]
    },
  ]
}

0 个答案:

没有答案