我想導航到頁面中的特定選項卡，使用
this.$router.push({
name: "AdminNotifications",
params: { tab: "requests" },
})
所以在頁面內我可以獲取引數并設定選項卡：
mounted() {
const routeTab = this.$route.params.tab;
if (routeTab) this.tab = routeTab;
}
如果當前頁面不是，它可以作業AdminNotifications。
但除此之外，還有一個錯誤：
NavigationDuplicated: Avoided redundant navigation to current
那么......有沒有辦法只設定tab道具而不導航？
謝謝
uj5u.com熱心網友回復：
如果您已經在那里，則無法導航到路線。但是，由于您已經在那里，您可以設定this.tab為所需的值：
if (this.$route.name === 'AdminNotifications') {
this.tab = 'requests';
} else {
this.$router.push({
name: "AdminNotifications",
params: { tab: "requests" },
})
}
如果負責導航的組件與包含 的組件不同，則tab可以將tab引數推送到$route：
if (this.$route.name === 'AdminNotifications') {
this.$router.replace({
params: { tab: "requests" }
});
} else {
this.$router.push({
name: "AdminNotifications",
params: { tab: "requests" },
})
}
在頁面組件中，mounted用適當的手表替換“觀察者”，動態設定tab為 的任何真實值$route.params.tab：
watch: {
'$route.params.tab': {
handler(val) {
if (val) {
this.tab = val;
}
},
immediate: true
}
}
uj5u.com熱心網友回復：
如果我正確理解了您的問題，您可以this.$route.params.tab = "any value"像任何其他變數一樣做。this.$route.params.tab和其他所有變數一樣，它只是一個變數。
uj5u.com熱心網友回復：
這是我使用vue-router.
- 添加一個包含選項卡和選項卡內容組件的父組件。 您的結構可能如下所示：
- 在 Tabs.vue 下面粘貼代碼。該組件應包含在您要顯示選項卡內容的位置，以及用于鏈接特定選項卡的路由器鏈接。
- 然后填充標簽內容組件。
- 在您的 router.js 中注冊您的選項卡路由，如下所示。
選項卡/Tab1.vue
選項卡/Tab2.vue
選項卡/Tab2.vue
Tab.vue
選項卡.vue
<template>
<div class="tabs">
<router-link to="/tab1">Tab 1</router-link>
<router-link to="/tab2">Tab 2</router-link>
<router-link to="/tab3">Tab 3</router-link>
<router-view />
</div>
</template>
<script>
export default {
name: "tabs",
components: {},
};
</script>
import Tabs from "./Tabs";
import Tab1 from "./tabs/Tab1";
import Tab2 from "./tabs/Tab2";
import Tab3 from "./tabs/Tab3";
{
path: "/",
redirect: "/tab1",
component: Tabs,
children: [
{
path: "/tab1",
name: "tab1",
component: Tab1
},
{
path: "/tab2",
name: "tab2",
component: Tab2
},
{
path: "/tab3",
name: "tab3",
component: Tab3
}
]
}
現在您應該能夠通過路由器鏈接導航特定選項卡。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/444704.html