文章/答案/技术大牛

发布

问了解Vue路由
EN

Stack Overflow用户

提问于 2019-07-05 00:07:37

回答 2查看 197关注 0票数 0

我正在尝试理解vue-router。但到目前为止，我还没能得到我需要的东西。简单地说，当我转到example.com时，它应该显示Home组件，如果我转到example.com/:id，我希望加载SavedComparator组件。我的router.js如下：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import SavedComparator from './views/SavedComparator.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Home,
      children: [
        {
          path: '/:id',
          component: SavedComparator
        }
      ]
    }
  ]
})

在我的App.vue中，我有以下代码段：

<v-content>
   <h2>params: {{ $route.params.id }}</h2>
   <router-view />
</v-content>

但是当我转到example.com/h8s7f时，它总是显示Home component。此外，App.vue中的$route.params.id不打印任何内容。

vue.js

vue-router

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-07-05 00:30:20

问题在于，您希望路由器的行为就像激活了历史记录模式一样

打开历史模式：

export default new Router({
  mode: "history",
  routes: [

或者访问url为example.com/#/h8s7f (在路由之前使用散列)

下面是一个示例:您可以通过添加/+一个id https://codesandbox.io/s/vue-routing-example-33p1n?fontsize=14来访问路由

票数 2

Stack Overflow用户

发布于 2019-07-05 00:27:21

您不必在嵌套路径中以'/‘开头路径，因为以'/’开头的路径将被视为父路由在您的子路径中尝试此操作

 {
      path: 'comparator/:id', 
      component: SavedComparator
 }

然后example.com/comparator/id会将您路由到正确的组件

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56891481

复制

相似问题

问了解Vue路由
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问了解Vue路由EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问了解Vue路由
EN