javascript - 使用 vue.js 时如何在 index.js 中配置 router-view 默认页面

Question

在我的项目中，我使用 vue.js 2.9。

我有detail.vue页面，一些html代码如下:

<div class="tab">
 <div class="tab-item">
   <router-link to='/goods' >goods</router-link>
 </div>
 <div class="tab-item">
  <router-link to='/ratings' >ratings</router-link>
 </div>
 <div class="tab-item">
   <router-link to='/seller' >seller</router-link>
 </div>
</div>
<keep-alive>
  <router-view ></router-view>
</keep-alive>

index.js 内容如下:

export default new Router({
routes: [{
  path: '/',
  name: 'Home',
  component: Home
},
{
  path: '/detail',
  name: 'Detail',
  component: Detail,
  children: [{
    path: '/goods',
    name: 'Goods',
    component: Goods
  },
  {
    path: '/ratings',
    name: 'Ratings',
    component: Ratings
  },
  {
    path: '/seller',
    name: 'Seller',
    component: Seller
  }]
}]
})

问题是打开detail.vue后router-view的结果是Home，而不是商品。

打开detail.vue页面默认的router-view结果应该是商品，而不是首页。

我已经添加了详细的内容.vue

components: {
'v-header': header,
'v-goods': goods
 },
 routes: [{
 path: '/',
 name: 'goods',
 component: goods
 }]

我在 App.vue 中添加了内容

<script type="text/ecmascript-6">
import Home from '@/components/home/Home'
export default {
  name: 'App',
  routes: [{
    path: '/',
    name: 'Home',
    component: Home
   }]
  }
</script>

但不幸的是，又失败了。打开detail.vue时它什么也没显示。如何配置index.js？谁能帮助我？

Answer 1

根据您的问题，您应该在路由中使用 Children 属性，如下所示:

routes: [{
   path: '/',
   name: 'Home',
   component: Home
  }, 
  {
   path: '/detail',
   name: 'Detail',
   component: Detail,
   children: [
     {
      path: '/ratings',
      name: 'Ratings',
      component: Ratings
     }, 
     {
      path: '/seller',
      name: 'Seller',
      component: Seller
     },
     {
      path: '/goods',
      name: 'Goods',
      component: Goods
     }]
   }]

并且您还应该在 app.vue 中为默认路由(Home)指定 < router-view > ，并在detail.vue 中为特定于该特定组件的路由指定 < router-view > ，如上所示。无需更改您在此处提到的模板。