vue-router詳解

来源:https://www.cnblogs.com/huayang1995/archive/2020/04/04/12632398.html

路由(vue-router) 現在的應用都流行SPA應用(single page application) 傳統的項目大多使用多頁面結構,需要切換內容的時候我們往往會進行單個HTML文件的跳轉,這個時候網路、性能影響,瀏覽器會出現不定時間的空白界面,用戶體驗不好 單頁面應用就是用戶通過某些操作地址欄 ...


路由(vue-router)


現在的應用都流行SPA應用(single page application)

傳統的項目大多使用多頁面結構,需要切換內容的時候我們往往會進行單個HTML文件的跳轉,這個時候網路、性能影響,瀏覽器會出現不定時間的空白界面,用戶體驗不好

單頁面應用就是用戶通過某些操作地址欄url之後,動態的進行不同模板內容的無刷新切換,用戶體驗好。

Vue中會使用官方提供的vue-router插件來使用單頁面,原理就是通過檢測地址欄變化後對應的路由組件進行切換(卸載和安裝)
 

簡單路由實現

cnpm install vue-router -S  or yarn add vue-router

在Vue中,$router指向的是大路由,routes是路由配置數組, $route指向的是當前活躍的路由。

1.引入vue-router,如果是在腳手架中,引入VueRouter之後,需要通過Vue.use來註冊插件
router/index.js文件

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

2.創建router路由器

new Router({
    routes:[
        {path:"/home",component:Home}
    ]
})

3.創建路由表並配置在路由器中

var routes =[
    {path,component}//path為路徑,component為路勁對應的路由組件
]

var router = new Router({
    routes
})

export default router

4.在根實例里註入router,目的是為了讓所有的組件里都能通過this.$router、this.$route來使用路由的相關功能api

import router from "./router"
new Vue({
    el:"#app",
    router, //註冊一下  讓組件可以通過this.$router or this.$route 使用路由相關的api屬性或方法
    template:"<App/>",
    components:{App}
})

5. 利用router-view來指定路由切換的位置
6. 時候router-link來創建切換的工具,會渲染成a標簽,添加to屬性來設置更改的path信息,且會根據當前路由的變化為a標簽添加對應的router-link-active/router-link-exact-active(完全匹配成功)類名

<router-link to="/main">main</router-link>
<router-link to="/news">news</router-link>

.router-link-active{
    color:red;
}

路由的懶載入


懶載入也叫延遲載入,即在需要的時候進行載入,隨用隨載。在單頁應用中,如果沒有應用懶載入,運用webpack打包後的文件將會異常的大,造成進入首頁時,需要載入的內容過多,延時過長,不利於用戶體驗,而運用懶載入則可以將頁面進行劃分,需要的時候載入頁面,可以有效的分擔首頁所承擔的載入壓力,堅守首頁載入用時。

非按需載入則會把所有的路由組件塊的js打包在一起。當業務包很大的時候建議用路由的按需載入(懶載入)。
按需載入會在頁面第一次請求的時候,把相關路由組件塊的js添加上:

{
    path:'/about',
    name:'about',
    component:()=>import('@/views/About') //採用了路由懶載入方式
}

多級路由

在創建路由表的時候,可以為每一個路由對象創建children屬性,值為數組,在這個裡面又可以配置一些路由對象來使用多極路由,註意:一級路由path前加“/"

const routes =[
    {path:"/main",component:AppMain},
    {path:"/news",component:AppNews,children:[
        {path:'inside',component:AppNewsInside},
        {path:'outside',component:AppNewsOutside}
    ]},
]

二級路由組件的切換位置依然由router-view來指定(指定在父級路由組件的模板中)

<router-link to='inside'>inside</router-link>
<router-link to='outside'>outside</router-link>

<router-view></router-view>

預設路由和重定向


當我們進入應用,預設想顯示某一個路由組件,或者當我們進入某一級路由組件的時候其某一個子路由組件,我們可以配置路由:

{path:'',component:Main}

當我們需要進入之後進行重定向到其他路由的時候,或者url與路由表不匹配的時候:

{path:'/',redirect:'/main'}
///...放在最下麵
{path:'*',redirect:'/main'}

命名路由


我們可以給路由對象配置name屬性,這樣的話,我們在跳轉的時候直接寫name:main就會快速的找到此name屬性對應的路由,不需要寫大量的url path路徑了

<router-link
v-for="nav in navs"
:key="nav.id"
:to="{name:nav.name}"
>
{{nav.title}}</router-link>

//router/index.js的配置
var router= new VueRouter({
    routes:[
        {
            path:"xxx",
            component:xxx,
            children:[
                {path:"guonei",component:()=>import("@/views/Guonei"),name:"guonei"},          
                {path:"guoji",component:()=>import("@/views/guoji"),name:"guoji"},  

            ]
        }
    ]
})

<script>
    export default {
        data(){
            return {
                navs:[
                    {id:1,title:"國內新聞",name:'guonei'},
                    {id:2,title:"國際新聞",name:'guoji'}
                ]
            }
        }
    }
</script>

 動態路由匹配

有時候我們需要在路由跳轉的時候跟上參數,路由傳參的參數主要有兩種:路由參數、queryString參數。
路由參數需要在路由表裡設置
{path:'/user/:id',component:User}
上面的代碼就是給User路由配置接收id的參數,多個參數繼續在後面設置
在組件中可以通過this.$route.params來使用
queryString參數不需要在路由表設置接收,直接設置 ? 後面的內容,在路由組件中通過this.$route.query接收

<div class="nowplaying">
正在熱映...
<!-- <ul>
    <li
    v-for="data in datalist"
    :key="data"
    @click="toDetail(data)"
    >{{data}}</li>
</ul> -->

<!-- <ul>
<router-link
v-for="data in datalist"
:key="data"
:to="'/detail/'+data+'?title=文章一'"
tag="li"
>
{{data}}
</router-link>
</ul> -->

<ul>
<router-link
    v-for="data in datalist"
    :key="data"
    :to="{
        name:'detail',
        params:{id:data},
        query:{title:'文章二'}
    }"
    tag="li"
>
{{data}}
</router-link>
</div>

<script>
data(){
    return{
        datalist:['11','22','33']
    }
}
</script>

router.js

{
    name:"detail",
    path:"/detail/:id",
    component:Detail
}

prop將路由與組件解耦


在組件中接收路由參數需要this.$route.params.id代碼冗餘,現在可以在路由表裡配置props:true
{path:'detail/:id',component:AppNewsDetail,name:'detail',props:true}
在路由自己中可以通過props接收id參數去使用了
props:['id']

聲明式導航router-link


<router-link>組件支持用戶在具有路由功能的應用中(點擊)導航。通過to屬性指定目標地址,預設渲染成帶有超鏈接的<a>標簽,可以通過配置tag屬性生成別的標簽。另外,當目標路由成功激活時,鏈接元素自動設置一個表激活的css類名。

router-link的to屬性,預設寫的是path(路由的路徑),可以通過設置一個對象,來匹配更多

:to='{name:"detail",params:{id:_new.id},query:{content:_new.content}}'

name是要跳轉的路由的名字,也可以寫path來指定路徑,但是path的時候就不能使用params傳參,params是傳路由參數query傳queryString參數
replace屬性可以控制router-link的跳轉不被記錄
active-class屬性可以控制路徑切換的時候對應的router-link渲染的dom添加的類名

編程是導航


有的時候需要在跳轉前進行一些動作,router-link直接跳轉,需要在方法裡面使用$router的方法
this.$router.push()

#### 路由模式
為了構建SPA(單頁面應用),需要引入前端路由系統,這也就是Vue-router存在的意義。前端路由的核心,就在於---改變視圖的同時不會向後端發出請求。

路由有兩種模式:hash、history,預設會使用hash模式,但是如果url裡面不想出現醜陋hash值,在new VueRouter的時候配置mode值為history來改變路由模式,本質使用H5的history.pushState方法來更改url,不會引起刷新。

history模式,會出現404的情況,需要後臺配置
因為我們的應用是個單頁客戶端應用,如果後臺沒有正確的配置當用戶瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404,這就不好看了。
所以要在服務端增加一個覆蓋所有情況的候選資源:如果URL匹配不到任何靜態資源,則應該返回同一個index.html頁面,這個頁面就是你app的依賴頁面

路由原理:
hash路由 ====> window.onhashchange監聽路徑的切換
history路由 ====> window.onpopstate監聽路徑的切換

#### 路由守衛
在某些情況下,當路由跳轉前或跳轉後、進入、離開某一個路由前、後,需要做某些操作,就可以使用路由鉤子來監聽路由的變換

 全局路由鉤子


//進入到某個路由組件之前
router.beforeEach((to,from,next)=>{
    //會在任意路由跳轉前執行,next一定要記著執行,不然路由不能跳轉了
console.log('beforeEach')
console.log(to,from)
next()
})

//進入到某個路由組件之後
router.afterEach((to,from)=>{
    //會在任意路由跳轉後執行
    console.log('afterEach')
})

 單個路由鉤子:


只有beforeEnter,在進入前執行,to參數就是當前路由

routes:[
    {
        path:'/foo',
        component:Foo,
        //當進入到foo路由之前,就會觸發
        beforeEnter:(to,from,next)=>{
            //...
            next()//必須執行next之後,對應的Foo組件才可以正常顯示出來
        }
    }
]

路由組件鉤子:


//進入到某個組件之前的攔截,獲取不到組件內部的this
beforeRouteEnter(to,from,next){
    //在渲染該組件的對應路由被 confirm前調用
    //不能獲取組件實例`this`
    //因為當守衛執行前,組件實例還沒有被創建
},

beforeRouteUpdate(to,from,next){
    //在當前路由改變,但是該組件被覆用時調用
    //舉例來說,對於一個帶有動態參數的路徑/foo/:id,在/foo/1和/foo/2之間跳轉的時候,
    //由於會渲染同樣的Foo組件,因此組件實例會被覆用,而這個鉤子就會在這個情況下被調用。
    //可以訪問組件實例`this`
},
//離開某個組件前的攔截,獲取到組件內部的this
beforeRouteLeave(to,from,next){
    //導航離開該組件的對應路由時調用
    //可以訪問實例`this`
}


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

更多相關文章
  • 接上篇 https://www.cnblogs.com/chenyingying0/p/12635080.html 上拉載入更多 base/scroll/index.vue <template> <!-- wiper會實例化構造函數,生成swiper實例 --> <!-- ref="swiper"能 ...
  • 接上篇 https://www.cnblogs.com/chenyingying0/p/12623653.html 下拉刷新 下拉刷新--變化提示文字 base/scroll/index.vue <template> <!-- wiper會實例化構造函數,生成swiper實例 --> <!-- re ...
  • 最近編寫響應式的時候在使用@media用的不是很順手,所以就記錄一下方便查看 基本語法: @media +( not | only) + 媒體類型 +(and+ 媒體查詢) 我們首先瞭解一下媒體類型,常用的不多,就幾個:screen(電腦屏幕) ,print (列印或者列印預覽),all(所有設備) ...
  • ```javascript ``` ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200404222513323.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text... ...
  • 案例: 父組件 <template> <div id="app"> <h1>vuex</h1> <h3>count:{{count}}</h3> <button @click="count++">+1</button> <button @click="count--">-1</button> <!- ...
  • 博主:www 原文地址: https://www.cnblogs.com/wangjian8888/p/6092158.html。 字體屬性:(font) 大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到,只要用數值就可以,單位:PX、PD 樣式 ...
  • 前言 做項目涉及表情在網頁上顯示。稍微研究了一下實現方案,整體思路不複雜,就是稍微涉及到一些新概念和新方法。 精靈圖 精靈圖又稱雪碧圖,簡單來說就是一種把很多小圖片拼成一張大圖的圖片形式。下圖就是表情項目中的精靈圖。註意這張精靈圖是png格式,除表情外其他區域都是透明的。 精靈圖解決的問題是:很多網 ...
  • 小計劃 四月抓基礎 五月二刷重點知識,加點項目鞏固(大概三個項目的樣子) 六月抓面試,沖秋招。 四月博客會更以下內容 VUE 全套搭建小米商城(更註重前端) 三種 node.js 方式搭建個人博客(更註重後端) 深入解讀 ES6 系列 再學 JavaScript ES(6-10) 大話 HTTP ... ...
一周排行
  • C#6.0新特性 C#7.0新特性 C#8.0新特性 ...
  • out變數 可以直接在方法中使用out申明變數 int.TryParse("123", out var result); 元組 元組的申明 var alphaBetaStart = (alpha: "a", beta: "b"); Console.WriteLine($"{alphaBetaStar ...
  • 在我們的項目中,通常會把數據存儲到關係型資料庫中,比如Oracle,SQL Server,Mysql等,但是關係型資料庫對於併發的支持並不是很強大,這樣就會造成系統的性能不佳,而且存儲的數據多為結構化數據,對於非結構數據(比如文本)和半結構化數據(比如JSon) 就顯得不夠靈活,而非關係型資料庫則很 ...
  • 這幾天終於弄懂了async和await的模式,也搞明白了一直在心裡面積壓著的許多問題,所以寫一篇博客來和大家分享一下。 關於非同步機制我認為只要記住的以下幾點,就可以弄明白了: 1.我認為async和awwait兩個修飾符中最關鍵的是await,async是由於方法中包含await修飾符之後才在方法定 ...
  • 實現WCF的步驟如下: 設計服務協議 實現服務協議 配置服務 托管服務 生成客戶端(這步可有可無) 設計或定義服務協議要麼使用介面,要麼使用類。建議介面,使用介面好處一堆例如修改介面的實現,但是服務協定有無需改變。 設計服務協議,介面上使用 ServiceContractAttribute ,方法上 ...
  • 什麼鬼,我的CPF快寫好了,你居然也要搞跨平臺UI框架?什麼Maui? 之前怎麼不早說要搞跨平臺UI框架呢?看到谷歌搞flutter眼紅了?明年年底發佈?又搞這種追別人屁股的爛事情。 什麼MVU模式?模仿Dart?用C#代碼直接寫UI的模式和我的CPF很像啊。 當初我考慮過XML,Json來描述UI ...
  • 寫在前面 Docker作為開源的應用容器引擎,可以讓我們很輕鬆的構建一個輕量級、易移植的容器,通過Docker方式進行持續交付、測試和部署,都是極為方便的,並且對於我們開發來說,最直觀的優點還是解決了日常開發中的環境配置與部署環境配置上的差異所帶來的種種疑難雜症,從此推脫產品的措辭也少了——“我電腦 ...
  • 一、前言 回顧:認證授權方案之授權初識 從上一節中,我們在對授權系統已經有了初步的認識和使用,可以發現,asp.net core為我們提供的授權策略是一個非常強大豐富且靈活的認證授權方案,能夠滿足大部分的授權場景。 在ConfigureServices中配置服務:將授權服務添加到容器 public ...
  • 項目背景: 工作之餘兼職一家公司(方向是工業4.0)給做IM系統,主要功能包括:文字、 圖片、文件傳輸、遠程協助、視頻語音等等。這些功能都是基於群會話, 比如工廠操作工人遇到問題,請求遠程專家,這個初級專家不能解決問題,會邀請一個高級專家進來解決。開發過程中主要遇到的問題是視頻和語音這一塊,像其他的... ...
  • 基礎概念 Microsoft中間語言(MSIL),也成為通用中間語言(CIL),是一組與平臺無關的指令,由特定於語言的編譯器從源代碼生成。MSIL是獨立於平臺的,因此,他可以在任何公共語言基礎架構支持特定的環境上執行。 通過JIT編譯器將MSIL轉換為特定電腦環境的特定機器代碼。這是在執行MSIL ...