vue-router

来源:https://www.cnblogs.com/l-y-h/archive/2019/10/12/11661874.html
-Advertisement-
Play Games

一、vue-router 1、簡介 （1）SPA：Single Page Application（單頁應用），簡單理解就是只有一個web頁面的應用。即載入單個HTML頁面，並根據用戶與程式的交互 動態更新頁面的 web應用程式。其載入頁面時不會載入整個頁面，只是更新部分內容。 （2）路由：指的是SP ...


一、vue-router

1、簡介

（1）SPA：Single Page Application（單頁應用），簡單理解就是只有一個web頁面的應用。即載入單個HTML頁面，並根據用戶與程式的交互 動態更新頁面的 web應用程式。其載入頁面時不會載入整個頁面，只是更新部分內容。

（2）路由：指的是SPA的路徑管理器。SPA基於路由與組件，其中路由指定訪問路徑，並建立路由與組件的映射關係。通過切換路由，從而載入不同的組件。

2、使用流程

step1：安裝路由

【命令行輸入】
npm install vue-router --save

step2：引入路由

【main.js】
// 引入vue-router
import VueRouter from 'vue-router';

// 使用vue-router
Vue.use(VueRouter);

step3：創建路由對象並聲明路由規則（創建路由）

new VueRouter({
    routes: [
        //一個個對象
        { path: '/home', component: Home }，
        { path: '/about', component: About }
    ]
});

step4：將router實例傳入 Vue實例中（註冊路由）

new Vue({
  router: router,      // 使用路由對象
  render: h => h(App),
}).$mount('#app')

step5：使用路由

// 選擇路由
<router-link to='/about'>About</router-link>
<router-link to='/home'>Home</router-link>

// 映射組件
<router-view></router-view>

 

二、基本路由實現

（1）文件結構：

 

 

（2）完整代碼:

【main.js】
import Vue from 'vue'
import App from './App.vue'

// 引入路由對象
import router from './router/router.js'

Vue.config.productionTip = false

new Vue({
    router: router,      // 使用路由對象
  render: h => h(App),
}).$mount('#app')



【App.vue】
<template>
    <div>
        <div>
            <router-link to='/about'>About</router-link>
            <br/>
            <br/>
            <router-link to='/home'>Home</router-link>
        </div>
        <br/>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <!--App -->
</template>

<script>
    export default {
    }
</script>

<style>

</style>


【About.vue】
<template>
    <div>About</div>
</template>

<script>
</script>

<style>
</style>


【Home.vue】
<template>
    <div>Home</div>
</template>

<script>
</script>

<style>
</style>


【router.js】
// 引入組件
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About.vue'
import Home from '../views/Home.vue'

// 使用組件
Vue.use(VueRouter)

// 向外拋出一個VueRouter
export default new VueRouter ({
    routes: [{
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home
        },
        // 預設選中About組件
        {
            path: '/',
            redirect: '/about'
        },
    ]
})

 

（3）截圖：局部刷新組件的效果

 

 點擊Home可以切換到Home組件，url路徑變。

 

 點擊About可以切換到About組件，url路徑變。

 

 

三、嵌套路由

　　路由中套路由。
（1）文件結構

 

 

（2）完整代碼

【在基本路由的基礎上修改代碼，給Home組件中 套個路由】
【router.js】
// 引入組件
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About.vue'
import Home from '../views/Home.vue'
import News from '../views/News.vue'
import Message from '../views/Message.vue'

// 使用組件
Vue.use(VueRouter)

// 向外拋出一個VueRouter
export default new VueRouter({
    routes: [{
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            // 使用 children 定義 子路由
            children: [{
                    path: '/home/news',
                    component: News
                },
                {
                    path: 'message', // 簡寫
                    component: Message
                },
                // 預設選中 News組件
                {
                    path: '', // 簡寫
                    redirect: '/home/news'
                },
            ]
        },
        {
            path: '/',
            redirect: '/about'
        }
    ]
})



【Home.vue】
<template>
    <div>
        <div>
            <h1>Home</h1>
            <router-link to='/home/news'>News</router-link>
            <br/>
            <br/>
            <router-link to='/home/message'>Message</router-link>
        </div>
        <br/>
        <br/>
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
</script>

<style>
</style>


【Message.vue】
<template>
    <div>Message</div>
</template>

<script>
</script>

<style>
</style>


【News.vue】
<template>
    <div>News</div>
</template>

<script>
</script>

<style>
</style>

 

（3）測試截圖：
　　初始畫面，預設選中 About組件

 

 點擊Home組件，預設選中News組件。

 

 點擊Message組件。

 

 

四、緩存路由組件

1、為什麼使用

　　預設情況下，切換路由時，被切換的路由會被銷毀，當重新切回時會被再次創建。如果想要保留之前的修改，可以使用緩存路由組件對象，緩存之前的修改。

2、如何使用

【原寫法】
<router-view></router-view>

【修改後】
<keep-alive>
    <router-view></router-view>
</keep-alive>

3、完整代碼

【對上述代碼進行修改，增加一個文本框】

【App.vue】
<template>
    <div>
        <div>
            <router-link to='/about'>About</router-link>
            <br/>
            <br/>
            <router-link to='/home'>Home</router-link>
        </div>
        <br/>
        <div>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
    <!--App -->
</template>

<script>
    export default {
    }
</script>

<style>

</style>


【About.vue】
<template>
    <div>
        About
        <input type="text" />
    </div>
</template>

<script>
</script>

<style>
</style>

截圖：
初始界面：

 

 輸入數據：

 

 切換到Home組件

 

 再切回About組件，值沒有被清除。

 

 

 

五、傳遞參數

1、通過url傳遞（param傳遞）

　　使用 冒號 + 參數名（:name）作為 占位符，並通過url 傳遞參數，使用$route.params接收參數。

【對上面代碼進行修改】

【router.js】
// 引入組件
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About.vue'
import Home from '../views/Home.vue'

// 使用組件
Vue.use(VueRouter)

// 向外拋出一個VueRouter
export default new VueRouter({
    routes: [{
            path: '/about/:name/:age',
            component: About
        },
        {
            path: '/home',
            component: Home
        },
        {
            path: '/',
            redirect: '/home'
        }
    ]
})


【App.vue】
<template>
    <div>
        <div>
            <router-link to='/about/tom/22'>About</router-link>
            <br/>
            <br/>
            <router-link to='/home'>Home</router-link>
        </div>
        <br/>
        <div>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
    <!--App -->
</template>

<script>
    export default {
    }
</script>

<style>

</style>


【About.vue】
<template>
    <div>
        About
        <br />
        name: {{$route.params.name}}
        <br />
        age: {{$route.params.age}}
    </div>
</template>

<script>
</script>

<style>
</style>


【Home.vue】
<template>
    <div>
        <h1>Home</h1>
    </div>
</template>

<script>
</script>

<style>
</style>

截圖：
初始界面

 

 點擊About，可以傳遞並接收參數

 

 

2、通過query傳遞

　　使用path匹配路由，並根據name定位路由，通過query傳遞參數，並使用$route.query接收參數。

【對上面代碼進行修改】

【router.js】
// 引入組件
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About.vue'
import Home from '../views/Home.vue'

// 使用組件
Vue.use(VueRouter)

// 向外拋出一個VueRouter
export default new VueRouter({
    routes: [{
            path: '/about',
            name: 'About',
            component: About
        },
        {
            path: '/home',
            component: Home
        },
        {
            path: '/',
            redirect: '/home'
        }
    ]
})


【About.vue】
<template>
    <div>
        About
        <br />
        name: {{$route.query.name}}
        <br />
        age: {{$route.query.age}}
    </div>
</template>

<script>
</script>

<style>
</style>


【App.vue】
<template>
    <div>
        <div>
            <!--需要使用  :to-->
            <router-link :to="people">About</router-link>
            <br/>
            <br/>
            <router-link to='/home'>Home</router-link>
        </div>
        <br/>
        <div>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
    <!--App -->
</template>

<script>
    export default {
        data() {
            return {
                people: {name: 'About', query: {name: 'jarry', age: '32'}}
            }
        }
    }
</script>

<style>

</style>

截圖：
初始畫面：

 

 點擊About，可以傳遞參數

 

 

3、通過param傳遞

　　與query類似，用name定位路由，但是通過 param傳遞參數，並使用$route.params接收參數。

【修改上面的文件】

【App.vue】
<template>
    <div>
        <div>
            <!--需要使用  :to-->
            <router-link :to="people">About</router-link>
            <br/>
            <br/>
            <router-link to='/home'>Home</router-link>
        </div>
        <br/>
        <div>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
    <!--App -->
</template>

<script>
    export default {
        data() {
            return {
                people: {name: 'About', params: {name: 'jarry', age: '32'}}
            }
        }
    }
</script>

<style>

</style>


【About.vue】
<template>
    <div>
        About
        <br />
        name: {{$route.params.name}}
        <br />
        age: {{$route.params.age}}
    </div>
</template>

<script>
</script>

<style>
</style>

 

截圖：
初始畫面：

 

 點擊About，參數傳遞正常。

 

 

六、$route 與 $router 的區別

1、$route

　　$route 指的是 路由信息的對象，其包含的是 路由的相關信息。比如：path，name，fullPath，query，params，meta。

 

 

（1）$route.path 與 $route.fullPath
　　對應當前路由的路徑。

（2）$route.query 與 $route.params
　　都屬於 key-value對象，表示url 傳遞的參數。

（3）$route.name
　　指的是當前路由的名字。


2、$router

　　$router 指的是 路由實例的對象，即new VueRouter創建的實例。其包含了常用的方法（比如 push()，replace()， back()等方法）。

（1）$router.push()
　　使用 push 方法可以向 瀏覽器的 history 棧中添加一個新的記錄，當點擊瀏覽器的返回按鈕 或 觸發 back 方法時，可以返回之前的頁面。

（2）$router.replace()
　　使用 replace 方法 不會向 history中添加記錄，而是替換當前的記錄，此時點擊後退按鈕不會返回之前的頁面。

 


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

-Advertisement-
Play Games
更多相關文章
  • 《HTML、CSS、Javascript網頁製作，從入門到精通》——第一章 HTML基礎，第二章HTML基本標記
    1）HTML的基本概念 HTML就一種描述性的標記語言，是文檔的超文本標記語言。 基本結構為： HTML標記組成 ： <標記元素> 源文件中標記是不區分大小寫的。 2）編寫方法： 1》dreamweaver 或者其他的工具如sublime等。 3）瀏覽HTML文件，查看源代碼。右鍵點擊網頁，選擇查看 ...
  • Package.json詳解
    引言 前端需要學習的東西真的挺多的，之前主要從事的是MVC框架，操作DOM，使用JQUERY比較多，不知到什麼時候，發現現在前端MVVM是主流，不得不把之前的大部分東西丟掉，作為前端嬰兒不斷前行。 所以以後的文章，可能開始都比較基礎，希望大拿不要見笑，若有不對的地方，希望指正，我也會不斷修正迭代。 ...
  • javascript基礎修煉(13)——記一道有趣的JS腦洞練習題
    示例代碼托管在： "http://www.github.com/dashnowords/blogs" 博客園地址： "《大史住在大前端》原創博文目錄" 華為雲社區地址： "【你要的前端打怪升級指南】" [TOC] 一. 題目 改造下麵的代碼，使之輸出0 9，寫出你能想到的所有解法。 首先作為前端開發 ...
  • js 實現watch監聽數據變化
    1.js 2.html 3. 給vm.a 從新賦值 就能看到 newVal 和oldVal的變化 ...
  • vue事件獲取當前對象
    一.事件傳參 如點擊事件 二.事件屬性 bubbles:返回布爾值，指示事件是否是起泡事件類型。 cancelable:返回布爾值，指示事件是否可擁可取消的預設動作。 currentTarget:返回其事件監聽器觸發該事件的元素。 eventPhase:返回事件傳播的當前階段。 target:返回觸 ...
  • css: hide or dispaly div
    六福會員 X ...
  • js Set對象
    1、將數組轉換成Set對象 2、數組去重 3、Set.prototype.has(value)判斷該值是否存在於Set對象中，返回布爾值 結合filter()方法，返回值為true的集合 ...
  • 關於的 let 關鍵字的一個小問題
    剛纔在看阮一峰老師的《ES6標準入門》，在介紹 let 那一段時有這麼一段話 我就自己在控制台試了一下這段代碼，輸出果然的是"abc"，於是我就把代碼稍微修改了下 也沒啥問題，證明瞭上面那段話的正確性。 然後，我又把 i++ 前的 console.log(i) 挪到了下麵，神奇的事情發生了！ 剛纔還 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類