vue-router詳解

来源:https://www.cnblogs.com/huayang1995/archive/2020/04/04/12632398.html
-Advertisement-
Play Games

路由(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`
}


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

-Advertisement-
Play Games
更多相關文章
  • 接上篇 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 ... ...
一周排行
    -Advertisement-
    Play Games
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...