web-dev-qa-db-ja.com

タブのvue-routerのデフォルトの子ルート

2つのリストを含むタブのあるホームページを作成しようとしています。デフォルトでは1つが開いています。

私は次のルート設定を持っています、私は単純化するために名前を変更しました

let routes = [{
    path: '/',
    name: 'home',
    component: require('./views/Home.vue'),
    children: [{
        path: 'list1',
        name: 'home.list1',
        component: require('./views/List1.vue')
    }, {
        path: 'list2',
        name: 'home.list2',
        component: require('./views/List2.vue')
    }]
}

./views/Home.vueの内部には、タブ（子ルート）ごとに2 <router-view></router-view>sの下に<router-link>があります。

アプリルートhttp://domain/にアクセスしたら、list1タブをアクティブにします。現在これを行うことができる唯一の方法は、http://domain/list1にアクセスすることです。

私が試してみました

children: [{
    path: '',
    name: 'home.list1'

これは最初はうまく機能しますが、http://domain/list2にアクセスすると、両方のタブリンク（ルーターリンク）がアクティブな状態になります。

JSFiddle 実行できませんが、コンテキストに役立ちます

これに対するより良い解決策はありますか？

vue.jsvue-router
8
Titan

親ルートにアクセスしたときにコンポーネント（タブ）がデフォルトで表示されるようにするには、パスを ''（空の文字列）として追加する必要があります。

以下は、Vueルーターのドキュメントからのn例です。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // UserHome will be rendered inside User's <router-view>
        // when /user/:id is matched
        { path: '', component: UserHome },

        // ...other sub routes
      ]
    }
  ]
})

'/'は使用しないでください。ルートルートと見なされます。

4
Fareez Ahamed

子ルートをもう1つ追加します（最初にする必要があります）

  children: [{
    path: '',
    redirect: 'list1', // default child path
  },
  ...
  ]
1
NaN

ホームルートが「/」でなければ、やりたいことがうまくいくと思います

routes: [
    { path: '/home', 
        name: 'home',
        component: require('./views/home.vue')
        children: [
            { path: '/', name: 'list1', component: list1 },
            { path: 'list2', name: 'list2', component: list2},
        ],
    }
]

これにより、ホームコンポーネントとlist1コンポーネントがイニシャル内に読み込まれます。次に、list2へのnavへのルーターリンクを使用できます。

<router-link :to="{ name: 'list2', params: { ...}}">

または、多分私は質問を理解していません。

0
retrograde