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
  • C#TMS系統學習（BaseCity頁面）
    C#TMS系統代碼-基礎頁面BaseCity學習 本人純新手，剛進公司跟領導報道，我說我是java全棧，他問我會不會C#，我說大學學過，他說這個TMS系統就給你來管了。外包已經把代碼給我了，這幾天先把增刪改查的代碼背一下，說不定後面就要趕鴨子上架了 Service頁面 //using => impo ...
  • C# - 委托與事件
    委托與事件 委托 委托的定義 委托是C#中的一種類型，用於存儲對方法的引用。它允許將方法作為參數傳遞給其他方法，實現回調、事件處理和動態調用等功能。通俗來講，就是委托包含方法的記憶體地址，方法匹配與委托相同的簽名，因此通過使用正確的參數類型來調用方法。 委托的特性 引用方法：委托允許存儲對方法的引用， ...
  • 解析 ABP vNext 依賴註入實現【屬性註入】的原理
    前言 這幾天閑來沒事看看ABP vNext的文檔和源碼，關於關於依賴註入(屬性註入)這塊兒產生了興趣。 我們都知道。Volo.ABP 依賴註入容器使用了第三方組件Autofac實現的。有三種註入方式，構造函數註入和方法註入和屬性註入。 ABP的屬性註入原則參考如下： 這時候我就開始疑惑了，因為我知道 ...
  • C#TMS系統學習（ShippingNotice頁面）
    C#TMS系統代碼-業務頁面ShippingNotice學習 學一個業務頁面，ok，領導開完會就被裁掉了，很突然啊，他收拾東西的時候我還以為他要旅游提前請假了，還在尋思為什麼回家連自己買的幾箱飲料都要叫跑腿帶走，怕被偷嗎？還好我在他開會之前拿了兩瓶芬達 感覺感覺前面的BaseCity差不太多，這邊的 ...
  • C#動態查詢：巧用Expression組合多條件表達式
    概述：在C#中，通過`Expression`類、`AndAlso`和`OrElse`方法可組合兩個`Expression<Func<T, bool>>`，實現多條件動態查詢。通過創建表達式樹，可輕鬆構建複雜的查詢條件。 在C#中，可以使用AndAlso和OrElse方法組合兩個Expression< ...
  • 在Biwen.QuickApi中整合一個極簡的發佈訂閱(事件匯流排)
    閑來無聊在我的Biwen.QuickApi中實現一下極簡的事件匯流排,其實代碼還是蠻簡單的,對於初學者可能有些幫助 就貼出來,有什麼不足的地方也歡迎板磚交流~ 首先定義一個事件約定的空介面 public interface IEvent{} 然後定義事件訂閱者介面 public interface I ...
  • WPF 穩定的全屏化視窗方法
    1. 案例 成某三甲醫預約系統， 該項目在2024年初進行上線測試，在正常運行了兩天後，業務系統報錯：The connection pool has been exhausted, either raise MaxPoolSize (currently 800) or Timeout (curren ...
  • 在 WPF 中集成 ASP.NET Core 和 WebView2 用於集成 SPA 應用
    背景 我們有些工具在 Web 版中已經有了很好的實踐，而在 WPF 中重新開發也是一種費時費力的操作，那麼直接集成則是最省事省力的方法了。 思路解釋 為什麼要使用 WPF？莫問為什麼，老 C# 開發的堅持，另外因為 Windows 上已經裝了 Webview2/edge 整體打包比 electron ...
  • C#事件
    EDP是一套集組織架構，許可權框架【功能許可權，操作許可權，數據訪問許可權，WebApi許可權】，自動化日誌，動態Interface，WebApi管理等基礎功能於一體的，基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 發佈到 Win7+
    .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
所有分類