快捷導(dǎo)航

vue 路由視圖 router-view嵌套跳轉(zhuǎn)的實(shí)現(xiàn)

更新時(shí)間：2021年09月13日 15:55:00 作者：帶著夢(mèng)想的咸魚(yú)

這篇文章主要介紹了vue 路由視圖 router-view嵌套跳轉(zhuǎn)，主要實(shí)現(xiàn)的內(nèi)容有制作一個(gè)登錄頁(yè)面，跳轉(zhuǎn)到首頁(yè)，首頁(yè)包含菜單欄、頂部導(dǎo)航欄、主體，標(biāo)準(zhǔn)的后臺(tái)網(wǎng)頁(yè)格式，菜單點(diǎn)擊顯示不同的頁(yè)面，感興趣的小伙伴請(qǐng)參考下面文章內(nèi)容

實(shí)現(xiàn)功能：制作一個(gè)登錄頁(yè)面，跳轉(zhuǎn)到首頁(yè)，首頁(yè)包含菜單欄、頂部導(dǎo)航欄、主體，標(biāo)準(zhǔn)的后臺(tái)網(wǎng)頁(yè)格式。菜單欄點(diǎn)擊不同菜單控制主體展示不同的組件（不同的頁(yè)面）。

配置router-view嵌套跳轉(zhuǎn)需要準(zhǔn)備兩個(gè)主要頁(yè)面，一個(gè)由app.vue跳轉(zhuǎn)的登錄頁(yè)面（login.vue），一個(gè)由登錄頁(yè)面（login.vue）跳轉(zhuǎn)首頁(yè)（index.vue）。另外還需要兩個(gè)用于菜單跳轉(zhuǎn)頁(yè)面，頁(yè)面內(nèi)容自定義

我這里使用的是element-ui作為模板

前置：引入element-ui

在項(xiàng)目目錄下執(zhí)行命令：npm i element-ui -s

修改main.js，引入element組件

步驟：

創(chuàng)建登錄頁(yè)面（login.vue）
創(chuàng)建后臺(tái)操作頁(yè)面（index.vue）
配置后臺(tái)操作頁(yè)面菜單跳轉(zhuǎn)
配置嵌套路由視圖路由控制菜單跳轉(zhuǎn)

1、修改app.vue頁(yè)面

app頁(yè)面只要放置一個(gè)router-view標(biāo)簽即可，每一個(gè)路由請(qǐng)求默認(rèn)都是從這里進(jìn)去跳轉(zhuǎn)

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
  }
}
</script>

<style>
</style>

2、創(chuàng)建登錄頁(yè)面（/views/login/login.vue）

這里的登錄按鈕跳轉(zhuǎn)是直接跳轉(zhuǎn)到主頁(yè)面，當(dāng)前登陸頁(yè)面將完全被替換掉

登錄頁(yè)代碼:point_down:

<template>
  <div id="login">
    <el-form>
      <el-row :gutter="20">
        <el-col class="title" :offset="9" :span="6">
          <h1>一個(gè)登錄頁(yè)面</h1>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col class="col-label" :offset="7" :span="4">
          <span class="label">賬號(hào)：</span>
        </el-col>
        <el-col :span="4">
          <el-input type="text" placeholder="請(qǐng)輸入賬號(hào)" v-model="account.username"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col class="col-label" :offset="7" :span="4">
          <span class="label">密碼：</span>
        </el-col>
        <el-col :span="4">
          <el-input type="password" placeholder="請(qǐng)輸入密碼" v-model="account.password"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :offset="8" :span="8">
          <span>
            <a href="#" rel="external nofollow"  rel="external nofollow"  @click="register" >注冊(cè)賬號(hào)</a>
            /
            <a href="#" rel="external nofollow"  rel="external nofollow"  @click="resetPwd" >重置密碼</a>
          </span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :offset="10" :span="4">
          <el-button type="primary" round @click="onSubmit">登錄</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      account: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    register() {
      this.$message({
        message: '好像沒(méi)這功能',
        type: 'info'
      })
    },
    resetPwd() {
      this.$message({
        message: '下輩子吧',
        type: 'success'
      })
    },
    onSubmit() {
      this.$router.push('/index')
    }
  }
}
</script>

<style scoped>
  #login {
    text-align: center;
    margin: 0 auto;
  }
  .label {
    height: 40px;
    line-height: 40px;
  }
  .col-label {
    text-align: right;
  }
  .el-row {
    margin-top: 15px;
  }
  .el-button {
    width: 120px;
  }
  .title {
    margin-top: 10%;
  }
</style>

View Code

2.1、在router/index.js中添加登錄頁(yè)面路由

{
      path: '/',
      name: 'login',
      component: () => import('../views/login/login.vue')
},

3、創(chuàng)建主頁(yè)面（/components/index.vue）

主頁(yè)面主要分為三塊，左側(cè)菜單欄（el-menu），頂部導(dǎo)航欄（el-container），主體展示頁(yè)面（el-main），這部分是從elment-ui中的布局容器實(shí)例拷貝過(guò)來(lái)的（https://element.eleme.cn/#/zh-CN/component/container）

<template>
  <el-container style="border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1']" :router="true">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-message"></i>導(dǎo)航一</template>
          <el-menu-item-group>
            <template slot="title">分組一</template>
            <el-menu-item index="1-1">選項(xiàng)1</el-menu-item>
            <el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container class="table-div">
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>刪除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王小虎</span>
      </el-header>

      <el-main>
        <table></table>
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

<script>
export default {
  name: 'index',
  data() {
  }
}
</script>

<style>
  .table-div {
    width: 100%;
  }
  .el-table {
    height: 100%;
  }
</style>

3.1、創(chuàng)建主頁(yè)面路由

{
      path: '/index',
      name: 'index',
      component: () => import('@/components/index')
}

至此，由登錄頁(yè)面跳轉(zhuǎn)到主頁(yè)面的操作配置就完成了?？纯葱Ч?。啟動(dòng)項(xiàng)目，訪問(wèn)http://localhost:8080/#/

點(diǎn)擊登錄，跳轉(zhuǎn)到首頁(yè)

4、修改首頁(yè)

主要修改兩個(gè)部分：菜單跳轉(zhuǎn)路徑，主體配置路由視圖

4.1、開(kāi)啟菜單路由模式，并修改菜單跳轉(zhuǎn)路徑

在el-menu菜單中開(kāi)啟vue-router模式，并在el-menu-item標(biāo)簽中的index配置要跳轉(zhuǎn)的頁(yè)面地址

4.2、添加router-view

直接將主體內(nèi)容替換為router-view標(biāo)簽，并為name屬性添加參數(shù)，我這使用table標(biāo)識(shí)，這個(gè)很重要，路由需要根據(jù)這個(gè)name屬性指定跳轉(zhuǎn)的路由視圖

5、創(chuàng)建兩個(gè)子頁(yè)面

頁(yè)面可以在任意位置，只要路由地址配置正確即可

我這創(chuàng)建了first-page.vue，first-table.vue（頁(yè)面內(nèi)容自定義）

在router/index.js配置路由，在哪個(gè)頁(yè)面下增加的router-view組件，就在相應(yīng)的路由配置中添加children，這里是在index路由修改配置，添加children，配置path、name和components（這里注意，如果只配置默認(rèn)路由視圖跳轉(zhuǎn)，用的參數(shù)是component，配置多路由視圖跳轉(zhuǎn)時(shí)components）

{
      path: '/index',
      name: 'index',
      component: () => import('@/components/index'),   // 這里配置首頁(yè)默認(rèn)路由跳轉(zhuǎn)的頁(yè)面組件
      children: [   // 添加子路由
        {
          path: 'page',  // 注意點(diǎn)：路徑前面不要帶/，否則無(wú)法跳轉(zhuǎn)，在這里吃過(guò)虧
          name: 'page',
          components: {   // 注意參數(shù)名帶s
            table: () => import('@/components/first-page')  // 這里的table跟首頁(yè)的router-view標(biāo)簽的name一致，才會(huì)在首頁(yè)的路由視圖進(jìn)行跳轉(zhuǎn)，看3.2
          }
        },
        {
          path: 'table',
          name: 'table',
          components: {
            table: () => import('@/components/first-table')
          }
        }
      ]
}

這樣配置訪問(wèn)地址為：localhost:8080/#/index/page、localhost:8080/#/index/table

到這里配置完成，訪問(wèn)頁(yè)面測(cè)試一下

可以看到，兩個(gè)菜單配置改變了主體的路由視圖，控制視圖展示的頁(yè)面組件。配置完成

到此這篇關(guān)于vue 路由視圖 router-view嵌套跳轉(zhuǎn)詳情的文章就介紹到這了,更多相關(guān)vue 路由視圖 router-view嵌套跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: