Vue 嵌套路由使用總結

Vue 嵌套路由使用總結

 

by:授客 QQ：1033553122

 

開發環境

 

Win 10

 

node-v10.15.3-x64.msi

下載地址：

https://nodejs.org/en/

 

需求場景

以下圖，咱們但願點擊導航欄不一樣菜單時，導航欄下方加載不一樣的組件，進而展現不一樣的頁面內容

 

 

 

 

 

解決方案

使用動態路由

新建home.vue做爲子頁面組件

<template>

    <div>

        <h3>home Page</h3>

        <p>home page content</p>

    </div>

</template>

 

<script>

 

export default {

    name: "homePage",

};

</script>

 

<style scoped>

h3 {

    font-size: 30px;

}

</style>

 

新建nav1.vue做爲子頁面組件

<template>

    <div>

        <h3>nav1 Page</h3>

        <p>nav1 page content</p>

    </div>

</template>

 

<script>

 

export default {

    name: "nav1Page",

 

};

</script>

 

<style scoped>

h3 {

    font-size: 30px;

}

</style>

 

新建index.vue做爲父頁面

<template>

    <div class="container">

        <div class="nav">

            <ul>

                <li>

                    <a @click="clickHome">首頁</a>

                </li>

                <li>

                    <a @click="clickNav1">導航1</a>

                </li>

            </ul>

        </div>

        <div class="content">

            <router-view></router-view>

        </div>

    </div>

</template>

 

<script>

export default {

    methods: {

        clickHome() {

            this.$router.push("/index/home");

        },

        clickNav1() {

            this.$router.push("nav1");

        }

    }

};

</script>

 

<style>

.nav ul {

    width: 100%;

    height: 30px;

    margin: 5px;

    padding: 0;

}

 

.nav ul li {

    float: left; /*橫排顯示*/

    list-style-type: none; /*去掉前面的點*/

}

 

.nav ul li a {

    width: 100px;

    display: block; /*設置爲block，width才起做用*/

    height: 28px;

    line-height: 28px;

    background: grey;

    color: #fff;

    margin: 0px 1px;

    font-size: 18px;

 

    text-align: center;

    text-decoration: none;

}

 

.nav ul li a:hover {

    width: 100px;

    height: 26px;

    line-height: 28px;

    border: 1px solid red;

    color: red;

    background: #fff;

}

 

.content {

    position: absolute;

    top: 40px;

    bottom: 0px;

    right: 10px;

    left: 15px;

    background: rgb(176, 207, 180)

}

</style>

 

說明：

一、

    methods: {

        clickHome() {

            this.$router.push("/index/home");

        },

        clickNav1() {

            this.$router.push("nav1");

        }

    }

 

點擊對應「首頁」菜單，「導航1」時分別觸發調用這裏定義了兩個方法clickHome()和clickNav1()，兩個方法的實現都是調用this.$router.push()，航到不一樣的 UR（跳轉到不一樣的頁面）。另外，push這個方法會向 history 棧添加一個新的記錄，因此，當用戶點擊瀏覽器後退按鈕時，能夠回到以前的頁面

 

須要注意的是，這裏給push方法提供的表明路徑的字符串。若是該字符串不以「/」打頭，則表示相對路徑，相對於父級路由的path。若是該字符串以「/」打頭，則表示絕對路徑的，相對於根路徑「/」

 

例中，觸發clickNav1()調用時，提供的路徑字符串爲「nav1」,爲相對路徑，父級路由路徑爲/index，因此點擊後跳轉的url路徑爲/index/nav1。

例中，觸發clickHome()調用時，提供的路徑字符串爲「/index/home」,爲絕對路徑，因此點擊後跳轉的url路徑爲/index/home。

 

二、

<div class="content">

<router-view></router-view>

</div>

 

這裏經過在父頁面，即index.vue組件中添加<router-view></router-view>實現動態加載不一樣組件頁面。點擊導航菜單時，會自動加載對應的組件，而後替換<router-view>元素爲對應的組件內容。

 

 

參考連接：

https://router.vuejs.org/zh/guide/essentials/navigation.html

https://router.vuejs.org/zh/guide/essentials/nested-routes.html

 

修改router/index.js

import Vue from "vue"

import Router from "vue-router"

 

 

import index from "@/views/index"

import home from "@/views/home"

import nav1 from "@/views/nav1"

 

Vue.use(Router)

 

export default new Router({

  mode: "history",

  routes: [

    {

      path: "/index",

      name: "index",

      component: index,

      children: [

        {

          path: "/index/home",

          name: "home",

          component: home

        },

        {

          path: "nav1",

          name: "nav1",

          component: nav1

        }

      ]

    }

  ]

})

 

 

說明：

一、vue路由經過children實現路由嵌套。我的理解，嵌套路由控制內容子組件內容的展現區：實現父組件的內容展現區保持不變，子組件內容展現區動態變化。

 

二、同this.$router.push(path)，這裏的path也分相對路徑（相對於父級路由的path路徑），和絕對路徑(相對於「/」)。如上，/index/home爲絕對路徑，nav1爲相對路徑（其絕對路徑爲/index/nav1）。注意，這裏path是否爲絕對路徑，不影響是否嵌套路由，是否嵌套路由，是經過children決定的，只是影響路由匹配。如上，若是path: "nav1",寫成path: "/nav1",，那麼執行this.$router.push("nav1")時，跳轉的url爲/index/nav1，將找不到匹配的路由

 

三、this.$router.push(path) 和這裏routes的關係：

我的理解，執行this.$router.push(path)後，程序自動獲取須要跳轉的絕對url，暫且稱之爲toPath,而後在routes中進行匹配，若是匹配到則加載對應的組件。

總結

經過router-view實如今當前指定容器中動態加載不一樣組件，展現不一樣頁面的大體實現思路：

一、 在當前頁面（這裏稱之爲父頁面）.vue文件template模板中的指定位置（「包含」子組件內容的容器），添加<router-view></router-view>元素

二、 router/index.js中給父頁面路徑所在的路由，添加子路由：子組件的加載url對應的路由