Question

我试图了解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组件。此外，$route.params.id中的App.vue不会打印任何内容。

Answer 1

问题是您期望路由器的行为就像激活了历史记录模式一样

打开历史记录模式：

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

或以example.com/#/h8s7f的形式访问网址（在路径之前加上哈希）

这里是一个例子：您可以通过添加/ + ID来访问路线 https://codesandbox.io/s/vue-routing-example-33p1n?fontsize=14

Answer 2

您不必在嵌套路由中以“ /”开始路由，因为从“ /”开始的路由将被视为父级路由

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

，然后example.com/comparator/id会将您转至正确的组件

了解Vue路由

2 个答案: