Vue结合element-ui实现路由嵌套

*Major*

已于 2023-08-09 22:04:50 修改

阅读量268

点赞数

文章标签： vue.js ui javascript

于 2023-08-09 22:00:45 首次发布

本文链接：https://blog.csdn.net/qq_41375318/article/details/132198203

版权

Vue结合element-ui实现路由嵌套

:router="true"  //开启index路由

            <el-menu
              default-active="/"
              background-color="#545c64"
              class="el-menu"
              active-text-color="#fff"
              text-color="#ddd"
              :router="true"  //开启index路由
              >
              <el-menu-item index="/">
                <i class="el-icon-s-home"></i>
                <span slot="title">首页</span>
              </el-menu-item>
              <el-menu-item index="/merchant">
                <i class="el-icon-menu"></i>
                <span slot="title">商家</span>
              </el-menu-item>
              <el-menu-item index="/user">
                <i class="el-icon-user-solid"></i>
                <span slot="title">用户</span>
              </el-menu-item>
              <el-menu-item index="/order">
                <i class="el-icon-s-order"></i>
                <span slot="title">订单</span>
              </el-menu-item>
            </el-menu>

显示切换界面

   <router-view></router-view>   // 路由嵌套

<el-container>
  <!-- 切换显示界面 -->
  <el-main class="main">
    <router-view></router-view>  
  </el-main>
  <el-footer class="footer">这是Footer</el-footer>
</el-container>

{
    path: "/multiRoute",
    component: MultiRouteView,
    // 嵌套路由
    children: [
      {path: "",component: Index,name:"index"},
      {path: "merchant",component: Merchant,name: "merchant"},
    //   {path: "order",component: Order,name:"order"},
    //   {path: "user",component: User,name: "user"},
    //   {path: "merchant/detail",component: MerchantDetail,name: "merchant_detail"},
    ]
  },

import VueRouter from 'vue-router'
import Vue from "vue"
import FrameView from "./components/FrameView"
import LoginView from "./components/LoginView"
import LabelingView from "./components/LabelingView"
import AlgoProcessView from "./components/AlgoProcessView"
import MultiRouteView from "./components/MultiRouteView"

// 嵌套路由
import Index from './components/index'
import Merchant from './components/Merchant'
Vue.use(VueRouter)

const router = new VueRouter({
    routes:[
        {
            path:'/',
            component:LabelingView,
            name:"LabelingView"
         },
        {
           path:'/frame',
           component:FrameView,
           name:"FrameView"
        },
        {
            path:'/login',
            component:LoginView,
            name:"LoginView"
        },
        {
            path:'/AlgoProcess',
            component:AlgoProcessView,
            name:"AlgoProcessView"
        },
        {
            path: "/multiRoute",
            component: MultiRouteView,
            // 嵌套路由
            children: [
              {path: "",component: Index,name:"index"},
              {path: "merchant",component: Merchant,name: "merchant"},
            //   {path: "order",component: Order,name:"order"},
            //   {path: "user",component: User,name: "user"},
            //   {path: "merchant/detail",component: MerchantDetail,name: "merchant_detail"},
            ]
          },
    ]
})

// 导出
export default router;