国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue-router基本學習（1）

IamDLY / 2267人閱讀

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

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

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

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

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

這里稍微的講了一些單頁面和多頁面的一些知識，大家要知道 Vue 是一個單頁面應(yīng)用，其頁面的跳轉(zhuǎn)需要通過路由：Vue-router!!! vue-router的安裝我們已經(jīng)在前面的文章里講過了，今天這篇文章就講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
   }
  ]
})

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

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

路由嵌套

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

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

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

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

動態(tài)路由

如果我們要將某一種模式下的路由全部映射到同一個組件上，比如我們要將"/user/tom" 和 "/user/David" 都匹配到同樣組件下面，那么動態(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

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

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

動態(tài)路由引起的組件復用

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

src/router/index.js
同上

Parent.vue

Childs1.vue

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


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

編程式導航和聲明式導航

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

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

Childs1.vue
同上

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

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

router.push()

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

router.replace()

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

router.go()

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/108933.html

相關(guān)文章

  • 從頭開始學習vue-router

    摘要：路由模塊的本質(zhì)就是建立起和頁面之間的映射關(guān)系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數(shù)跳轉(zhuǎn)對應(yīng)路由配置于是我們可以獲取參數(shù)六配置子路由二級路由實際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。 一、前言 要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

    tommego 評論0 收藏0

  • 從頭開始學習vue-router

    摘要：路由模塊的本質(zhì)就是建立起和頁面之間的映射關(guān)系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數(shù)跳轉(zhuǎn)對應(yīng)路由配置于是我們可以獲取參數(shù)六配置子路由二級路由實際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。 一、前言 要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

    jhhfft 評論0 收藏0

  • 從頭開始學習vue-router

    摘要：路由模塊的本質(zhì)就是建立起和頁面之間的映射關(guān)系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數(shù)跳轉(zhuǎn)對應(yīng)路由配置于是我們可以獲取參數(shù)六配置子路由二級路由實際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。 一、前言 要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

    frontoldman 評論0 收藏0

  • Vue學習日記（三）——Vue路由管理vue-router

    摘要：重定向可以實現(xiàn)某些需要根據(jù)特定邏輯改變頁面原本路由的需求，例如簡單的未登錄狀態(tài)下的頁面訪問個人信息路由時應(yīng)該重定向到登錄路由頁面。 前言 為了給讀者更好的體驗，去理解vue-router和下一篇介紹vuex，決定還是來一個實戰(zhàn)教程來帶大家更加的去深入理解vue-router，在這之前，讀者先自行了解和去官網(wǎng)下載npm和node，附：npm官網(wǎng) 項目構(gòu)建 這里我采用vue-cli+web...

    iKcamp 評論0 收藏0

  • Vue學習日記（三）——Vue路由管理vue-router

    摘要：重定向可以實現(xiàn)某些需要根據(jù)特定邏輯改變頁面原本路由的需求，例如簡單的未登錄狀態(tài)下的頁面訪問個人信息路由時應(yīng)該重定向到登錄路由頁面。 前言 為了給讀者更好的體驗，去理解vue-router和下一篇介紹vuex，決定還是來一個實戰(zhàn)教程來帶大家更加的去深入理解vue-router，在這之前，讀者先自行了解和去官網(wǎng)下載npm和node，附：npm官網(wǎng) 項目構(gòu)建 這里我采用vue-cli+web...

    tuniutech 評論0 收藏0

發(fā)表評論

0條評論

IamDLY

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<