vue的页面一进来想触发一个点击事件 默认让他选中第一个

新手上路,请多包涵

这是我冲另一个页面点击跳转到了这个页面 (这个页面的地址是/admin) 我想的是进来就让他默认选中第一个 加载第一个组件 我有七个路由 每个路由对应着右边 但是这七个路由都写在/admin下的子路由 有什么方法能一进来就触发一次点击事件 让第一个选中 地址也会改变为第一个的路由 有点乱这个 我不知道我这种路由嵌套方式正确不 因为我一进来右边是没有东西的 只有点击之后才会出现相应的组件 大哥大姐们 帮我解答下

<div class="admin">
    <el-container>
      <el-container class="adminheader">
          <el-header >后台管理</el-header>
      </el-container>
      <el-container class="hahaha">
        <el-aside style="width:240px;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.349019607843137);height:100%;background:#eee" class="elslide">
         <el-menu
  default-active="1"
  class="el-menu-vertical-demo inner-container" 
 >
  <router-link to="/adminstystemcontrol">
  <el-menu-item id="target" index="1" @click="handleonceclick">
    <i class="el-icon-menu"></i>
    <span slot="title">后台管理</span>
  </el-menu-item></router-link>

 <router-link to="/audit">
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span slot="title">开通审核</span>
  </el-menu-item></router-link>

   <router-link to="/signup">
  <el-menu-item index="3">
    <i class="el-icon-menu"></i>
    <span slot="title">平台签约业务员</span>
  </el-menu-item></router-link>

   <router-link to="/score">
  <el-menu-item index="4">
    <i class="el-icon-menu"></i>
    <span slot="title">返现积分</span>
  </el-menu-item></router-link>

   <router-link to="/advertising">
  <el-menu-item index="5">
    <i class="el-icon-menu"></i>
    <span slot="title">广告设定</span>
  </el-menu-item></router-link>

   <router-link to="/live">
  <el-menu-item index="6">
    <i class="el-icon-menu"></i>
    <span slot="title">直播审核</span>
  </el-menu-item></router-link>

   <router-link to="/shoping">
  <el-menu-item index="7">
    <i class="el-icon-menu"></i>
    <span slot="title">积分商城</span>
  </el-menu-item></router-link>
</el-menu>
            
        </el-aside>
        <el-main>
            
            <div v-if="nana">
                <adminstystemcontrol></adminstystemcontrol>
            </div>
                <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</div>

</template>

<script>
import adminstystemcontrol from '@/components/manageWebManage/adminstystemcontrol/adminstystemcontrol';

export default {
    data(){
        return {
            nana:false
        }
    },
    components:{
        adminstystemcontrol
    },
    created(){
        this.handleonceclick()
    },
    
    methods:{
        handleonceclick(){
            let url = window.location.href;
            
            let bool = url.indexOf('Admin');
            if(bool!==-1){
                this.nana = true
            }
        }
    }
}

</script>

<style scoped>

.adminheader{
    background: rgba(0, 153, 255, 1);
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
}
.adminheader .el-header{
    font-size: 24px;
    color: #fff;
    line-height: 56px;
    font-weight: 700;
    

}
.hahaha{
    width: 90%;
    position: fixed;
    left:5%;
    top: 60px;
    bottom: 0;
    background:#eee;
}
.inner-container{
    background:#eee;
    color:#000;

}
.elslide::-webkit-scrollbar {
display: none;

}

</style>

阅读 19.3k
1 个回答

方向错了。
路由设置里可以设置默认子路由。

path: '/admin',
redirect: '/admin/xxx',
// redirect: {name: '子组件名'} 建议使用name跳转
推荐问题