Vue 嵌套路由使用總結

来源:https://www.cnblogs.com/shouke/archive/2020/01/13/12186730.html
-Advertisement-
Play Games

Vue 嵌套路由使用總結 by:授客 QQ:1033553122 開發環境 Win 10 node-v10.15.3-x64.msi 下載地址: https://nodejs.org/en/ 需求場景 如下圖,我們希望點擊導航欄不同菜單時,導航欄下方載入不同的組件,進而展示不同的頁面內容 解決方案 ...


Vue 嵌套路由使用總結

 

by:授客 QQ1033553122

 

開發環境

 

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>

 

說明:

1、

    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。

 

2、

<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

        }

      ]

    }

  ]

})

 

 

說明:

1、vue路由通過children實現路由嵌套。個人理解,嵌套路由控制內容子組件內容的展示區:實現父組件的內容展示區保持不變,子組件內容展示區動態變化。

 

2、同this.$router.push(path),這裡的path也分相對路徑(相對於父級路由的path路徑),和絕對路徑(相對於“/”)。如上,/index/home為絕對路徑,nav1為相對路徑(其絕對路徑為/index/nav1)。註意,這裡path是否為絕對路徑,不影響是否嵌套路由,是否嵌套路由,是通過children決定的,只是影響路由匹配。如上,如果path: "nav1",寫成path: "/nav1",,那麼執行this.$router.push("nav1")時,跳轉的url為/index/nav1,將找不到匹配的路由

 

3、this.$router.push(path) 和這裡routes的關係:

個人理解,執行this.$router.push(path)後,程式自動獲取需要跳轉的絕對url,暫且稱之為toPath,然後在routes中進行匹配,如果匹配到則載入對應的組件。

總結

通過router-view實現在當前指定容器中動態載入不同組件,展示不同頁面的大致實現思路:

1、 在當前頁面(這裡稱之為父頁面).vue文件template模板中的指定位置(“包含”子組件內容的容器),添加<router-view></router-view>元素

2、 router/index.js中給父頁面路徑所在的路由,添加子路由:子組件的載入url對應的路由


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 微信小程式端的左右聯動-滾動效果插件: 效果圖如下: 使用說明: 1. components/ScrollBox是滾動聯動的組件,pages/scroll是demo 裡面也有相關的註釋,demo中的數據是引入的靜態文件(utils/data.js),一定要註意傳入的數據格式!!!!參考 utils/ ...
  • 1.環境要求: java 1.8+ 2.部署運行: 本機以及虛擬機上運行: 1.從https://gitee.com/kekingcn/file-online-preview/releases地址下載最新的版發行包 2.解壓kkFileView-2.x.x.Zip包 3.打開解壓後文件夾的bin目錄 ...
  • 遍歷DOM樹 第一個函數: 給我根節點, 我會找到所有的子節點: forDOM(根節點) 獲取這個根節點的子節點 var children=根節點的.children 調用第二個函數 第二個函數: 給我所有的子節點, 我把每個子節點的名字顯示出來(children) for(var i=0;i<ch ...
  • https://blog.csdn.net/weixin_45601379/article/details/100550421 ...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv ...
  • 二個固定定位,用margin 把左邊和右邊都讓出來。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s ...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv ...
  • 淺拷貝 拷貝就是複製, 就相當於把一個對象中的所有的內容, 複製一份給另一個對象, 直接複製, 或者說, 就是把一個對象的地址給了另一個對象, 他們指向相同, 兩個對象之間有共同的屬性或者方法, 都可以使用 寫一個函數,作用:把一個對象的屬性複製到另一個對象中,淺拷貝 var obj1={ age: ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...