因為有到頁面可以通過左側選單欄,打開跳轉,但是有時候頁面可能是頁面按鈕點擊通過this.$router.push()跳轉
頁面內按鈕跳轉到其他頁面時,想要頁面所屬到左側選單打開對應子選單。
我采用到element-ui 設定通過:default-openeds=" " 來設定。
當頁面按鈕this.$router.push(),跳轉時候來定義一個index值,傳到vuex的mutation,存盤到state,
然后在左側選單所在組件取出vuex的state的index值。
然后值一直是之前改的2,后面把2改為1,還是顯示2。 而且做選單確實展開了。但是選單沒識訓去。點擊其他選單也沒反應。控制臺也報錯
我想做的效果是,頁面跳轉,對應選單能展開,而且能識訓,不報錯
//左側選單組件
<el-aside width="200px" class="option-side">
<el-menu
:default-openeds='selectedIndexs'
@open="handleOpen"
@close="handleClose"
:default-active="selectedIndex"
active-text-color="#409EFF"
text-color="#fff"
router
:unique-opened="true"
class="el-menu">
<el-submenu
:index="item.id + ''"
v-for="(item) in menus"
:key="item.id"
class="submenu-menu"
>
<template slot="title">
<!-- 左側的小圖示 chanpinshuju -->
<!-- <sidebarItem > </sidebarItem> -->
<a href="javascript:;">
<svg class="svg-icon" >
<use :href="'#'+item.name"></use>
</svg>
</a>
<!-- 一級選單標題 -->
<span class="submenu-title" >{{item.label}}</span>
</template>
<!-- 回圈創建 二級選單 -->
<el-menu-item
class="submenu-item"
:index="'/home/'+ subitem.path"
v-for="subitem in item.children"
:key="subitem.id"
>
<i class="el-icon-menu" ></i>
<span slot="title" >{{subitem.label}}</span>
</el-menu-item>
<!-- </a> -->
</el-submenu>
</el-menu>
</el-aside>
data(){
return{
slideindex:2,
selectedIndexs:['1'],
selectedIndex:"1",
}
watch:{
'selectedIndexs':{
handler:function(val,oldval){
if(val!==oldval){
this.getNavType()
window.console.log('修改后',val,'修改前',oldval);
}
},
},
},
computed:{
...mapState(['selectSideIndexs'])
},
created(){
},
mounted(){
this.selectedIndexs=this.selectSideIndexs;
}
state: {
selectSideIndexs:[],
},
mutations: {
// 路由跳轉,側邊欄對應路由激活
asideMenuIndex(state, selectedIndex) {
state.selectSideIndexs=[]
state.selectSideIndexs = selectedIndex;
window.console.log(selectedIndex, "我是激活選單selectedIndex")
// window.console.log(user.Authorization+"222")
// window.localStorage.setItem('Authorization', user.Authorization);
},
},
//要跳轉的頁面
methods: {
...mapMutations(['changeLogin','saveUserName','asideMenuIndex']),
handleLogin(){
getTest(this.loginForm).then( res => {
let asideMenuIndexs=["2"]
this.asideMenuIndex(asideMenuIndexs)
this.$router.push('/home');
})
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/62633.html
標籤:JavaScript
上一篇:請問誰知道用vue cli 創建專案時報錯怎么解決如圖
下一篇:JavaScript資料型別
