Question

我的vue-router出了问题。我复制了一部分路由器供您查看，也是我使用路由器视图的组件的一部分。正如你所看到的，我正在使用道具，因为我的理解是道具是传递$ router.params的高级方式。此外，这是一个嵌套的路由器视图。我可以很好地路由到嵌套路由，但是当我点击刷新时，我会在控制台中收到这些错误。

“无法加载资源：服务器响应状态为404（未找到）”

“GET http://localhost:8080/distilleries/1/dist/build.js net :: ERR_ABORTED”

我想知道是否有人可以提供帮助。

{
  path: '/distilleries/:id',
  component: Distillery,
  props: true,
  children: [
    {
      path: '',
      component: DistilleryAbout,
      name: 'DistilleryAbout',
      props: true
    },
    {
      path: 'spirits',
      props: true,
      component: DistilleryProducts,
      name: 'DistilleryProducts'
    },
    {
      path: 'awards',
      props: true,
      component: DistilleryAwards,
      name: 'DistilleryAwards'
    },
    {
      path: 'reviews',
      props: true,
      component: DistilleryReviews,
      name: 'DistilleryReviews'
    },
    {
      path: 'recipes',
      props: true,
      component: DistilleryRecipes,
      name: 'DistilleryRecipes'
    },
    {
      path: 'media',
      props: true,
      component: DistilleryMedia,
      name: 'DistilleryMedia'
    }
  ]
}

<v-flex xs12>
    <v-toolbar class="lb" flat>
      <v-toolbar-items style="margin: 0 auto">
        <v-layout row wrap>
          <v-flex xs6 md12 class="mt-3">
            <router-link
                    tag="span"
                    v-for="items in menuItems"
                    :key="items.id"
                    class="itemsButton ma-3 pa-3 cb"
                    :to="{ name: items.link }"
                    >{‌{ items.title }}
            </router-link>
          </v-flex>
        </v-layout>
      </v-toolbar-items>
    </v-toolbar>
    <router-view :distillery="distillery"></router-view>
  </v-flex>

Answer 1

来自vue-router docs：

由于我们的应用是单页客户端应用，没有正确的服务器配置，用户访问时将收到404错误 http://oursite.com/user/id直接在他们的浏览器中。现在那很难看。

所以你需要在路由器中添加mode: 'history'：

const router = new VueRouter({
    mode: 'history',
    routes: [...],
})

add configuration取决于您的服务器。

vue-router，无法刷新动态id的路由

1 个答案: