vue-router选项卡的默认子路由

q9yhzks0  于 2022-12-19  发布在  Vue.js
关注(0)|答案(5)|浏览(150)

我试图有一个包含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中,每个选项卡(子路由)的<router-view></router-view>低于2 <router-link>
当我访问应用程序路由http://domain/时,我想激活list1选项卡。目前唯一可以激活的方法是访问http://domain/list1
我试过了

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

这最初工作得很好,但是如果我访问http://domain/list2,我的两个标签链接(路由器链接)都具有活动状态。
JSFiddle,我无法运行它,但它有助于了解上下文
有没有更好的解决办法?

vs91vp4v

vs91vp4v1#

再添加一个带重定向的子路由(应首先添加)

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

roejwanj2#

要使组件(选项卡)在访问父路由时显示为默认值,您需要添加路径“”(空字符串)
以下是来自Vue工艺路线文档的示例

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
      ]
    }
  ]
})

不要使用“/”,它将被视为根路由。

iqxoj9l9

iqxoj9l93#

我需要把重定向放在父页面上,它在第一次加载时有效。否则,它只在我重新加载页面时有效。

  • 放置重定向:父项上的"home.list1"
  • 将您孩子作为路径:''

希望能成功。

let routes = [{
        path: '/',
        name: 'home',
        redirect: {name: 'home.list1'}, // Redirect to named route
        // redirect '/list2' // Or redirect to path
        component: require('./views/Home.vue'),
        children: [{
            path: '',
            name: 'home.list1',
            component: require('./views/List1.vue')
        }, {
            path: 'list2',
            name: 'home.list2',
            component: require('./views/List2.vue')
        }]
    }
dldeef67

dldeef674#

我认为如果你的回家路线不是“/”,你想做的事情就会起作用

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

这将加载home组件和list 1组件,然后您可以使用router link to nav to list 2:

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

或者,也许我不明白你的问题。

bogh5gae

bogh5gae5#

以下是行之有效的方法。
您必须在父路由'home'上使用redirect: {name: 'home.list1'}(用于命名路由)属性。
确保对named route(如上所述)或path使用正确的重定向属性格式:redirect: '/list1'.
以下是正确的路由配置,与您的配置只有1行(redirect行)不同:

let routes = [{
        path: '/',
        name: 'home',
        redirect: 'home.list1',
        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')
        }]
    }

然后,每次访问/(您的'home'路由)都会被重定向到/list1
此外,router-link-activerouter-link-exact-active将被正确分配到子链路(两者)和父链路(仅router-link-active)。
这也适用于嵌套较深的非子布线和子布线。
欲了解更多重定向和别名选项,请参阅official docs

相关问题