Vue-router基本學(xué)習(xí)（1）

IamDLY 發(fā)布于2019-08-26 13:30 / 2318人閱讀

摘要：?jiǎn)雾?yè)面應(yīng)用網(wǎng)頁(yè)只有在第一次進(jìn)入頁(yè)面的的時(shí)候請(qǐng)求服務(wù)器的文件，接下來(lái)的頁(yè)面跳轉(zhuǎn)是基于內(nèi)部的。單頁(yè)面應(yīng)用第一次要將所有的資源全部加載，所以首屏?xí)r間慢，但是后續(xù)的跳轉(zhuǎn)不需要再次向服務(wù)器發(fā)請(qǐng)求。

多頁(yè)面應(yīng)用:網(wǎng)頁(yè)HTML文件是請(qǐng)求后臺(tái)發(fā)過(guò)來(lái)的。每次切換頁(yè)面都會(huì)從后臺(tái)把頁(yè)面文件傳輸回來(lái)。
單頁(yè)面應(yīng)用:網(wǎng)頁(yè)只有在第一次進(jìn)入頁(yè)面的、的時(shí)候請(qǐng)求服務(wù)器的HTML文件，接下來(lái)的頁(yè)面跳轉(zhuǎn)是基于內(nèi)部的router。
兩種應(yīng)用的優(yōu)缺點(diǎn)：

多頁(yè)面應(yīng)用只需要加載當(dāng)前頁(yè)面所需要的資源，所以首屏?xí)r間快。但是每切換一次頁(yè)面都要去請(qǐng)求一次服務(wù)器資源。單頁(yè)面應(yīng)用第一次要將所有的資源全部加載，所以首屏?xí)r間慢，但是后續(xù)的跳轉(zhuǎn)不需要再次向服務(wù)器發(fā)請(qǐng)求。

多頁(yè)面應(yīng)用可以直接實(shí)現(xiàn)SEO搜索，但是單頁(yè)面得有一套多帶帶的SEO方案。

單頁(yè)面可以實(shí)現(xiàn)局部刷新，多頁(yè)面實(shí)現(xiàn)不了。

這里稍微的講了一些單頁(yè)面和多頁(yè)面的一些知識(shí)，大家要知道 Vue 是一個(gè)單頁(yè)面應(yīng)用，其頁(yè)面的跳轉(zhuǎn)需要通過(guò)路由：Vue-router!!! vue-router的安裝我們已經(jīng)在前面的文章里講過(guò)了，今天這篇文章就講vue-router的使用。

基本使用

src/router/index.js

import Vue from "vue"
import Router from "vue-router"
import Parent from "@/components/Parent"
import Childs1 from "@/components/Childs1"
import Childs2 from "@/components/Childs2"
Vue.use(Router)

export default new Router({
  mode:"history",
  routes: [
 {
      path:"/parent",
      name:"Parent",
      component:Parent
    },
    {
      path:"/child1",
      name:"Childs1",
      component: Childs1
    },
   {
     path: "/child2",
     name:"Childs2",
    component:Childs2
   }
  ]
})

運(yùn)行結(jié)果如下圖：

我們輸入不同的路由不同的組件被渲染出。首先我們將需要在路由里面渲染的組件引入，然后配置路由。path:是我們需要配置的路徑名，component： 是我們需要在該路徑下渲染的組件。

路由嵌套

我們?cè)陂_(kāi)發(fā)的過(guò)程中不應(yīng)該只有一級(jí)路由。比如上面的例子，child應(yīng)該放在`parent的下面，name我們將怎么樣實(shí)現(xiàn)路由的嵌套呢？
當(dāng)然是用路由嵌套啦~

src/router/index.js

import Vue from "vue"
import Router from "vue-router"
import Parent from "@/components/Parent"
import Childs1 from "@/components/Childs1"
import Childs2 from "@/components/Childs2"
Vue.use(Router)

export default new Router({
  mode:"history",
  routes: [
   {
      path:"/parent",
      name:"Parent",
      component:Parent,
      children: [
        {path:"child1", component: Childs1},
        {path:"child2", component: Childs2}
      ]
    }
  ]
})

Parent.vue

運(yùn)行結(jié)果如下圖：

Parent.vue 的是渲染其組路由組件的地方。我們可以看到url為/parent的時(shí)候，頁(yè)面上只有paernt的字符串，當(dāng)我們路由為兩層的時(shí)候，parent和child全部展示在頁(yè)面上。vue-router 會(huì)根據(jù)不同的路由加載不同的組件。

動(dòng)態(tài)路由

如果我們要將某一種模式下的路由全部映射到同一個(gè)組件上，比如我們要將"/user/tom" 和 "/user/David" 都匹配到同樣組件下面，那么動(dòng)態(tài)路由是我們不二的選擇。

src/router/index.js

import Vue from "vue"
import Router from "vue-router"
import Parent from "@/components/Parent"
import Childs1 from "@/components/Childs1"
Vue.use(Router)

export default new Router({
  mode:"history",
  routes: [
   {
      path:"/parent",
      name:"Parent",
      component:Parent,
      children: [
        {path: "child1/:name", component:Childs1}
      ]
    }
  ]
})

Parent.vue

Childs1.vue

運(yùn)行結(jié)果如下圖：

我們雖然在/child1后面輸入不同的路徑，但是最后全部映射到同一個(gè)組件上。this.$route.params對(duì)象存放我們的動(dòng)態(tài)路由的內(nèi)容。

動(dòng)態(tài)路由引起的組件復(fù)用

動(dòng)態(tài)路由就是將不同的路由映射到同一個(gè)組件上，如果兩個(gè)路由是匹配到同一組件，那么Vue不會(huì)將當(dāng)前組件銷毀重建，而是直接替換不一樣的內(nèi)容，實(shí)現(xiàn)組件的復(fù)用。

src/router/index.js
同上

Parent.vue

Childs1.vue

運(yùn)行結(jié)果如下圖：

我們使用編程式導(dǎo)航來(lái)進(jìn)行路由切換，title的初始值唯一，在我們點(diǎn)擊按鈕進(jìn)行頁(yè)面切換的時(shí)候，title沒(méi)有變成初始值，而是復(fù)用了前一個(gè)頁(yè)面的組件，在原來(lái)的基礎(chǔ)上自增。第二章圖片也顯示，只有第一次進(jìn)入的時(shí)候進(jìn)入了生命周期鉤子，以后的頁(yè)面切換不再進(jìn)入鉤子。

編程式導(dǎo)航和聲明式導(dǎo)航

編程式導(dǎo)航是調(diào)用方法push進(jìn)行路由跳轉(zhuǎn)，聲明式導(dǎo)航是類似于a標(biāo)簽一樣的的標(biāo)簽進(jìn)行跳轉(zhuǎn)。to屬性的內(nèi)容就是我們要跳轉(zhuǎn)的目標(biāo)路由。聲明式導(dǎo)航最終渲染到頁(yè)面也是a標(biāo)簽。

聲明式導(dǎo)航在被點(diǎn)擊的時(shí)候會(huì)調(diào)用編程式導(dǎo)航的方法。
Parent.vue*

Childs1.vue
同上

運(yùn)行結(jié)果如下圖：

li的外面包裹著router-link，當(dāng)我們點(diǎn)擊的時(shí)候，路由就會(huì)跳轉(zhuǎn)到我們to指向的URL，我們點(diǎn)擊按鈕的時(shí)候，調(diào)用了"this.$router.push（url）"方法來(lái)進(jìn)行跳轉(zhuǎn)。這兩種方法沒(méi)有好與壞的區(qū)別，只是使用于不同的場(chǎng)景。

router.push()

push往history棧中加入一條記錄，所以當(dāng)我們使用瀏覽器的后退按鈕時(shí)，還能夠回到這一頁(yè)。

router.replace()

replace是替換棧中當(dāng)前頁(yè)的記錄，意味著history棧中不會(huì)再有當(dāng)前頁(yè)的記錄。這種方法通常用來(lái)授權(quán)頁(yè)，這樣就不會(huì)有二次授權(quán)的情況出現(xiàn)。

router.go()

go是告訴瀏覽器在history棧中前進(jìn)或者后退幾步，所以我們一般的頁(yè)面跳轉(zhuǎn)用push才能在棧中新增一條記錄，便于go使用。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/108933.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

IamDLY

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

怎么安裝tensorflow模塊

閱讀 1172·2023-04-26 02:02
gcorelabs：美國(guó)物理服務(wù)器,邁阿密機(jī)房;E5-2623v4型號(hào)CPU/提供75折優(yōu)惠

閱讀 2472·2021-09-26 10:11
php抽獎(jiǎng)實(shí)現(xiàn)

閱讀 3621·2019-08-30 13:10
實(shí)現(xiàn)三欄布局的幾種方法

閱讀 3817·2019-08-29 17:12
css3 制作圓環(huán)進(jìn)度條

閱讀 782·2019-08-29 14:20
PostCSS 是個(gè)什么鬼東西？

閱讀 2247·2019-08-28 18:19
詳解 mpvue 小程序框架及和原生的差異

閱讀 2298·2019-08-26 13:52
親歷，創(chuàng)業(yè)公司如何死掉的

閱讀 1022·2019-08-26 13:43

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Vue-router基本學(xué)習(xí)（1）

相關(guān)文章

從頭開(kāi)始學(xué)習(xí)vue-router

從頭開(kāi)始學(xué)習(xí)vue-router

從頭開(kāi)始學(xué)習(xí)vue-router

Vue學(xué)習(xí)日記（三）——Vue路由管理vue-router

Vue學(xué)習(xí)日記（三）——Vue路由管理vue-router

發(fā)表評(píng)論

0條評(píng)論

IamDLY

男|高級(jí)講師

TA的文章

怎么安裝tensorflow模塊

gcorelabs：美國(guó)物理服務(wù)器,邁阿密機(jī)房;E5-2623v4型號(hào)CPU/提供75折優(yōu)惠

php抽獎(jiǎng)實(shí)現(xiàn)

實(shí)現(xiàn)三欄布局的幾種方法

css3 制作圓環(huán)進(jìn)度條

PostCSS 是個(gè)什么鬼東西？

詳解 mpvue 小程序框架及和原生的差異

親歷，創(chuàng)業(yè)公司如何死掉的

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Vue-router基本學(xué)習(xí)（1）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！