vue 嵌套路由

在一个页面中如果想实现三个页面的拼接组成一个页面，这时候就用到嵌套路由了。

第一种方法：

1.顶部页面  /views/Home.vue

<template>
  <el-container>
    <!-- 顶部 -->
    <el-header class="headerAll">
      <div class="headImage"></div>
      <!-- <img src=""
           class="headImage"> -->
      <el-menu :default-active="activeIndex"
               class="el-menu-demo"
               mode="horizontal"
               background-color="#222a30"
               text-color="#fff"
               active-text-color="#29e2fe"
               @select="handleSelect">
        <el-menu-item v-for="(item, index) in menuList"
                      :key="index"
                      :index="item.index"
                      v-on:listenToChildEvent="menuClick">{{item.name}}</el-menu-item>
      </el-menu>

      <el-dropdown>
        <img src="../assets/headImage.jpg"
             class="drophead" />
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人信息</el-dropdown-item>
          <el-dropdown-item>退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>

    <!-- 跳转下左侧栏 menuSecond -->
    <router-view />
  </el-container>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {}
})
export default class Home extends Vue {
  data() {
    return {
      activeIndex: "1",
      menuList: [
        {
          name: "首页",
          index: "1",
          link: ""
        },
        {
          name: "车队基本信息",
          index: "2",
          link: ""
        },
        {
          name: "车队业务/交易管理",
          index: "3",
          link: ""
        },
        {
          name: "车队风险信息",
          index: "4",
          link: ""
        },
        {
          name: "车辆保险信息",
          index: "5",
          link: ""
        },
        {
          name: "车队估值/风险",
          index: "6",
          link: ""
        },
        {
          name: "车队财资",
          index: "7",
          link: ""
        },
        {
          name: "车队信贷",
          index: "8",
          link: ""
        }
      ]
    };
  }

  private handleSelect(key: any, keyPath: any) {
    switch (key) {
      case "1":
        this.$router.push({ path: "/" });
        break;
      case "4":
        this.$router.push({ path: "/menuSecond/1" });
        break;
      default:
        break;
    }
  }

  menuClick(data: any) {
    this.$router.push(data);
  }
}
</script>

<style lang="scss">
.headerAll {
  background: #222a30;
  margin-bottom: 20px;
  .headImage {
    width: 150px;
    height: 100%;
    border: 0;
  }
  .drophead {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}
</style>

2.左侧栏页面  view/menuSecond.vue

<template>
  <el-container class="menuSecond">
    <!-- 左侧栏 -->
    <el-aside width="200px"
              class="asideClass">
      <el-menu :default-active="defaultActive"
               class="el-menu-vertical-demo"
               active-text-color="#303133"
               @select="handleSelect">
        <el-menu-item v-for="(item, index) in filesList.navigeList"
                      :key="index"
                      :index="item.index">
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 跳转右侧栏 menuThird  -->
    <router-view />
  </el-container>

</template>

<script lang="ts">
import Vue from "vue";
import files from "../jsonFile";

export default Vue.extend({
  data() {
    return {
      filesList: files,
      selectIndex: 0,
      defaultActive: "1",
      currentPage4: 4
    };
  },
  methods: {
    handleSelect(key: String) {
      this.selectIndex = Number(key) - 1;
    }
  }
});
</script>

<style lang="scss">
.menuSecond {
  background: #f7f7f7;
  margin: 0 10px;
  .menuSecondRight {
    background: #fff;
    margin-left: 10px;
    .menuSecondH3 {
      margin-bottom: 40px;
    }
  }
  .el-pagination {
    margin-top: 30px;
    float: right;
  }
  .signTypeColor {
    color: #d40707;
  }
}
.el-menu {
  background: #fff;
}
</style>

3.右侧栏页面  view/menuThird.vue

<template>
  <el-container class="menuSecond">
    <el-main class="menuSecondRight">
      <h3 class="menuSecondH3">{{filesList.navigeList[this.selectIndex].name}}</h3>
      <el-table :data="tableData"
                border
                stripe
                style="width: 100%">
        <el-table-column type="index"
                         label="序号"
                         width="70"
                         align="center">
        </el-table-column>
        <el-table-column prop="name"
                         label="姓名"
                         width="110"
                         align="center" />
        <el-table-column prop="cardId"
                         label="身份证号"
                         align="center" />
        <el-table-column prop="driveId"
                         label="驾驶证号"
                         align="center" />
        <el-table-column prop="tel"
                         label="联系方式"
                         align="center" />
        <el-table-column prop="signType"
                         label="签约状态"
                         align="center">
          <template slot-scope="scope">
            <span :class="scope.row.signType === 0?‘signTypeColor‘:‘‘">{{scope.row.signType === 0?‘未签约‘:‘已签约‘}}</span>
          </template>
        </el-table-column>
        <el-table-column label="司机风险数据"
                         align="center">
          <template slot-scope="scope">
            <el-button type="text"
                       v-if="scope.row.signType === 0"
                       class="signTypeColor">需签约</el-button>
            <el-button type="text"
                       v-else>查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage4"
                     :page-sizes="[10, 20, 50, 100]"
                     :page-size="10"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="tableData.length">
      </el-pagination>
    </el-main>
  </el-container>

</template>

<script lang="ts">
import Vue from "vue";
import files from "../jsonFile";

export default Vue.extend({
  data() {
    return {
      filesList: files,
      selectIndex: 0,
      defaultActive: "1",
      currentPage4: 4,
      tableData: [
        {
          name: "张三",
          cardId: "110430198801180456",
          driveId: "110430198801180456",
          tel: "13811111111",
          signType: 0
        }
      ]
    };
  },
  mounted() {
    this.defined();
  },
  methods: {
    defined() {
      for (let i = 0; i < 9; i++) {
        let object = {
          name: "张三",
          cardId: "110430198801180456",
          driveId: "110430198801180456",
          tel: "13811111111",
          signType: i === 0 ? 0 : 1
        };
        this.tableData.push(object);
      }
    },
    handleSizeChange(val: Number) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val: Number) {
      console.log(`当前页: ${val}`);
    }
  }
});
</script>

<style lang="scss">
.menuSecond {
  background: #f7f7f7;
  margin: 0 10px;
  .menuSecondRight {
    background: #fff;
    margin-left: 10px;
    .menuSecondH3 {
      margin-bottom: 40px;
    }
  }
  .el-pagination {
    margin-top: 30px;
    float: right;
  }
  .signTypeColor {
    color: #d40707;
  }
}
.el-menu {
  background: #fff;
}
</style>

路由的配置  router.ts

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Home from ‘./views/Home.vue‘
Vue.use(Router)

export default new Router({
  mode: ‘history‘,
  base: process.env.BASE_URL,
  routes: [
    {
      path: ‘/‘,
      name: ‘home‘,
      component: Home,
      children: [
        {
          path: ‘/‘,
          name: ‘homeView‘,
          component: () =>
            import(/* webpackChunkName: "about" */ ‘./views/homeView.vue‘)
        },
        {
          path: ‘menuSecond‘,
          name: ‘menuSecond‘,
          children: [
            {
              path: ‘:num‘,
              name: ‘menuThird‘,
              component: () =>
                import(/* webpackChunkName: "about" */ ‘./views/menuThird.vue‘)
            }
          ],
          component: () =>
            import(/* webpackChunkName: "about" */ ‘./views/menuSecond.vue‘)
        }
      ]
    }
  ]
})

第二种方法

1.新建 view/layout.vue

<template>
  <el-container>
　　<!--顶部栏->
    <Head></Head>
    <el-container>　　　　<!-- 左侧栏 -->
      <Left></Left>　　　　<!--如右侧变，其他不变-->
      <router-view />
    </el-container>
  </el-container>

</template>

<script>
import Head from ‘@/components/Head‘
import Left from ‘@/components/Left‘

export default {
  components: {
    Head,
    Left
  }
}
</script>

2.新建components/Head.vue

<template>
  <el-header class="headerAll">
    <div class="headImage"></div>
    <!-- <img src=""
           class="headImage"> -->
           <!-- 左侧栏 -->
    <el-menu :default-active="activeIndex"
             class="el-menu-demo"
             mode="horizontal"
             background-color="#222a30"
             text-color="#fff"
             active-text-color="#29e2fe"
             @select="handleSelect">
      <el-menu-item v-for="(item, index) in menuList"
                    :key="index"
                    :index="item.index"
                    v-on:listenToChildEvent="menuClick">{{item.name}}</el-menu-item>
    </el-menu>

    <el-dropdown>
      <img src="../assets/headImage.jpg"
           class="drophead" />
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>个人信息</el-dropdown-item>
        <el-dropdown-item>退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-header>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {}
})
export default class Home extends Vue {
  data() {
    return {
      activeIndex: "1",
      menuList: [
        {
          name: "首页",
          index: "1",
          link: ""
        },
        {
          name: "车队基本信息",
          index: "2",
          link: ""
        },
        {
          name: "车队业务/交易管理",
          index: "3",
          link: ""
        },
        {
          name: "车队风险信息",
          index: "4",
          link: ""
        },
        {
          name: "车辆保险信息",
          index: "5",
          link: ""
        },
        {
          name: "车队估值/风险",
          index: "6",
          link: ""
        },
        {
          name: "车队财资",
          index: "7",
          link: ""
        },
        {
          name: "车队信贷",
          index: "8",
          link: ""
        }
      ]
    };
  }

  private handleSelect(key: any, keyPath: any) {
    switch (key) {
      case "1":
        this.$router.push({ path: "/" });
        break;
      case "4":
        this.$router.push({ path: "/menuThird" });
        break;
      default:
        break;
    }
  }

  menuClick(data: any) {
    this.$router.push(data);
  }
}
</script>

<style lang="scss">
.headerAll {
  background: #222a30;
  margin-bottom: 20px;
  .headImage {
    width: 150px;
    height: 100%;
    border: 0;
  }
  .drophead {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}
</style>

3.新建 components/Left.vue

<template>
  <!-- 左侧栏 -->
  <el-aside width="200px"
            class="asideClass">
    <el-menu :default-active="defaultActive"
             class="el-menu-vertical-demo"
             active-text-color="#303133"
             @select="handleSelect">
      <el-menu-item v-for="(item, index) in filesList.navigeList"
                    :key="index"
                    :index="item.index">
        <span slot="title">{{item.name}}</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script lang="ts">
import Vue from "vue";
import files from "../jsonFile";

export default Vue.extend({
  data() {
    return {
      filesList: files,
      selectIndex: 0,
      defaultActive: "1",
      currentPage4: 4
    };
  },
  methods: {
    handleSelect(key: String) {
      this.selectIndex = Number(key) - 1;
    }
  }
});
</script>

<style lang="scss">
.menuSecond {
  background: #f7f7f7;
  margin: 0 10px;
  .menuSecondRight {
    background: #fff;
    margin-left: 10px;
    .menuSecondH3 {
      margin-bottom: 40px;
    }
  }
  .el-pagination {
    margin-top: 30px;
    float: right;
  }
  .signTypeColor {
    color: #d40707;
  }
}
.el-menu {
  background: #fff;
}
</style>

4.路由配置

import Vue from ‘vue‘
import Router from ‘vue-router‘
// import Home from ‘./views/Home.vue‘
import layout from ‘./views/layout.vue‘

Vue.use(Router)

export default new Router({
  mode: ‘history‘,
  base: process.env.BASE_URL,
  routes: [
    {
      path: ‘/‘,
      name: ‘home‘,
      component: layout,
      children: [
        {
          path: ‘/‘,
          name: ‘homeView‘,
          component: () =>
            import(/* webpackChunkName: "about" */ ‘./views/homeView.vue‘)
        },
        {
          path: ‘menuSecond‘,
          name: ‘menuSecond‘,
          component: () =>
            import(/* webpackChunkName: "about" */ ‘./views/menuSecond.vue‘)
        },
        {
          path: ‘menuThird‘,
          name: ‘menuThird‘,
          component: () =>
            import(/* webpackChunkName: "about" */ ‘./views/menuThird.vue‘)
        }
      ]
    }
  ]
})

　　

原文地址：https://www.cnblogs.com/gqx-html/p/11263453.html

时间： 2024-10-17 20:33:46

vue 嵌套路由的相关文章

vue嵌套路由

在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套. index.html,只有一个路由出口 1 <div id="app"> 2 <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> 3 <router-view></router-view> 4 </div> main.

vue 嵌套路由，router-link-active的问题

最近开发的过程中,遇到一个嵌套路由的问题,需求是这这样的, 首页三个路由   a    b    c 路由写法是 export default new Router({ routes: [ // { // path: '/', // component: '' // }, // { // path: '/history-grade', // component: '' // }, { path: '/source-setting', component: setting, children: [

Vue 嵌套路由、路由守卫

嵌套路由 嵌套路由:一个路由配置中嵌套其他的路由配置. 嵌套路由挺常用的,比如导航栏有首页.文章.想法.留言4个模块,我们以嵌套路由的形式集成这些模块,在导航栏中点击对应的条目,就会路由到对应的页面(下方显示对应的页面),和html的<iframe>效果差不多. demo   嵌套路由 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><

Vue实现路由跳转和嵌套

在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套. index.html,只有一个路由出口 [html] view plain copy<div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> <

VUE温习：nextTick、$refs、嵌套路由、keep-alive缓存、is特性、路由属性用法、路由钩子函数

一.$nextTick 1.vue的dom执行异步更新,只要观察到数据变化,vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变. 2.vue.$nextTick(cb),数据发生变化,更新dom后执行回调 二.$refs用法 1.ref作用于普通元素——得到dom节点 2.ref作用于子组件——得到组件实例,可使用组件所有方法 3.当v-for用于元素或组件的时候,refs将是包含dom节点或组件实例的数组(想得到单个的ref,只需循环即可) 三.vue组件hover事件模拟 1.m

vue基础——嵌套路由

嵌套路由是非常常用的,一开始没仔细看过文档的时候踩过小坑,一是子路由的path里,不要加/了,直接写子路由的部分,路由的前半部分是直接从父路由中继承到了,二是对<router-view></router-view>组件渲染位置的理解 参考文档:https://router.vuejs.org/zh/guide/essentials/nested-routes.html 原文地址:https://www.cnblogs.com/chaoyueqi/p/10244503.html

六、Vue Router 嵌套路由

嵌套路由 在入口模板中设置的<router-view>是最顶层的出口.子组件中可以嵌套<router-view>为子路由匹配的出口. const User = { template: ` <div class="user"> <h2>User {{ $route.params.id }}</h2> <router-view></router-view> </div> ` } 要在嵌套的出口中

vue.js路由

Vue.js 路由 Vue.js 路由允许我们通过不同的 URL 访问不同的内容. 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA). Vue.js 路由需要载入 vue-router 库 中文文档地址:vue-router文档. 安装 1.直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js NPM 推荐使用淘宝镜像: cnpm install vue-route

关于Vue的路由、脚手架笔记

在页面引入vue-router.js文件,开始配置路由 <div id="box"> <ul><li> <a v-link="{path:'/home'}">主页</a> </li> //点击跳转路由 <li> <a v-link="{path:'/news'}">新闻</a></li> </ul> <div&