成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

aboutU / 1762人閱讀

摘要：重定向可以實(shí)現(xiàn)某些需要根據(jù)特定邏輯改變頁(yè)面原本路由的需求，例如簡(jiǎn)單的未登錄狀態(tài)下的頁(yè)面訪問(wèn)個(gè)人信息路由時(shí)應(yīng)該重定向到登錄路由頁(yè)面。

前言

為了給讀者更好的體驗(yàn)，去理解vue-router和下一篇介紹vuex，決定還是來(lái)一個(gè)實(shí)戰(zhàn)教程來(lái)帶大家更加的去深入理解vue-router，在這之前，讀者先自行了解和去官網(wǎng)下載npm和node，附：npm官網(wǎng)

項(xiàng)目構(gòu)建

這里我采用vue-cli+webpack構(gòu)建初始項(xiàng)目，在vue官網(wǎng)里面也有相關(guān)介紹，在這里我就手把手教大家一下吧，先通過(guò)控制臺(tái)進(jìn)入相關(guān)的文件目錄下，然后輸入

# 后面是注釋
# $表示當(dāng)前文件目錄

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
# 運(yùn)行項(xiàng)目my-preoject
$ npm run dev

npm install --global vue-cli 下載構(gòu)建工具

vue init webpack my-project 初始化項(xiàng)目

npm install 下載相關(guān)資源到node_models

npm run dev 運(yùn)行項(xiàng)目后，在瀏覽器輸入http://localhost:8080/#/可看到

介紹vue-router

經(jīng)過(guò)上面簡(jiǎn)單的構(gòu)建之后，一個(gè)項(xiàng)目的初始化就完成了，這里vue-cli和webpack已經(jīng)幫我們弄好了文件目錄結(jié)構(gòu)和基本目錄

在進(jìn)行使用vue-router之前，我不得不也先介紹一下vue-router是什么？

它是一個(gè)vue.js下的路由組件，那什么是路由呢？網(wǎng)上有一大堆官方的介紹，相信對(duì)于小白是難以理解的，這里我就簡(jiǎn)單的說(shuō)明一下吧。

其實(shí)路由也就是url，url是什么呢？url就是唯一資源定位符，簡(jiǎn)單的說(shuō)，也就是標(biāo)記頁(yè)面的唯一存在的一個(gè)標(biāo)簽，就像https://www.baidu.com，這里的www.baidu.com就是唯一資源定位符，https就只是一種協(xié)議，規(guī)范計(jì)算機(jī)網(wǎng)絡(luò)的通信協(xié)議。

介紹完這些，那么對(duì)于我們究竟該怎么用呢？

其實(shí)很簡(jiǎn)單，在平時(shí)當(dāng)中，我們就經(jīng)常碰到在一個(gè)網(wǎng)站里面點(diǎn)擊鏈接會(huì)彈到另外一個(gè)頁(yè)面，然后就可以發(fā)現(xiàn)他們的url改變了，而vue-router就是這樣，在同個(gè)域名下（這里的域名是http://localhost:8080），改變域名后面的字符參數(shù)，比如http://localhost:8080/me和http://localhost:8080/you是兩個(gè)不同的頁(yè)面就是靠vue-router進(jìn)行實(shí)現(xiàn)的。

引用vue-router

如果你在之前沒(méi)有安裝vue-router的話，建議可以先去官網(wǎng)，看著文檔使用npm安裝一下，這里就不多做介紹了。

首先我先在項(xiàng)目my-project/src/components（存放組件的目錄）里面添加兩個(gè)文件me.vue和you.vue

// me.vue






// you.vue

然后修改my-project/src/router（存放路由相關(guān)信息的目錄）下面修改index.js成

import Vue from "vue"
import Router from "vue-router"
import HelloWorld from "@/components/HelloWorld"

// 導(dǎo)入組件
import me from "../components/me"
import you from "../components/you"

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: "/",
      name: "HelloWorld",
      component: HelloWorld
    },
    // 將組件命名到路由上，輸入http://localhost:8080/#/me
    // 即可進(jìn)入不同的頁(yè)面
    {
      path: "/me",
      component: me
    },
    // 將組件命名到路由上，輸入http://localhost:8080/#/you
    // 即可進(jìn)入不同的頁(yè)面
    {
      path: "/you",
      component: you
    }
  ]
})

這樣只會(huì)輸入http://localhost:8080/#/me就會(huì)進(jìn)到其他頁(yè)面，是不是很簡(jiǎn)單，
那么我們?cè)趺丛陧?yè)面里面進(jìn)行跳轉(zhuǎn)呢？

這就運(yùn)用到了更有趣的知識(shí)了就是router-link你只要在你的組件的代碼下輸入

這里是跳轉(zhuǎn)鏈接

網(wǎng)頁(yè)就自動(dòng)跳轉(zhuǎn)到http://localhost:8080/#/me頁(yè)面了，但是這樣總是不好的，因?yàn)椋绻捎谝恍┰?，我們想修改路由的名字（比如me改成him）就得改兩個(gè)文件的信息，因此，vue團(tuán)隊(duì)也早就想好了，就是name屬性，將my-project/src/router（存放路由相關(guān)信息的目錄）下面修改index.js成

    // ...
    {
      path: "/me",
      name: "me",
      component: me
    },
    // ...

然后跳轉(zhuǎn)就改成

這里是跳轉(zhuǎn)鏈接

就可以進(jìn)行跳轉(zhuǎn)了

高級(jí)應(yīng)用

前端路由 最初級(jí)的應(yīng)用，就和上面的引用一樣，當(dāng)然還可以通過(guò)js代碼來(lái)改變，這個(gè)也很簡(jiǎn)單，就是比如添加一個(gè)按鈕，點(diǎn)擊按鈕通過(guò)js跳轉(zhuǎn)到其他頁(yè)面，就是重定向，簡(jiǎn)單的js代碼也下面這樣，就可以跳轉(zhuǎn)到其他頁(yè)面了

vue.$router.push("/me")

動(dòng)態(tài)路由 通過(guò)router-link傳遞參數(shù)，例如User，傳入userId這個(gè)參數(shù)，進(jìn)行渲染不同的路由信息

嵌套路由 嵌套路由其實(shí)簡(jiǎn)單的理解就是，子路由，例如，我想在me下面在添加幾個(gè)路由him和she那上面的代碼可以這樣寫之后輸入http://localhost:8080/#/me/him就可以進(jìn)入到子路由的頁(yè)面

// ...
    {
      path: "/me",
      name: "me",
      component: me，
      children: [
        {
            path: "him"
            // ...
        },
        {
            path: "she"
            // ...
        }
      ]
    },
    // ...

懶加載 結(jié)合異步組件以及在組件的created鉤子上觸發(fā)獲取數(shù)據(jù)的ajax請(qǐng)求，可以最大化的降低加載時(shí)間，減少流量消耗。這個(gè)對(duì)于沒(méi)有項(xiàng)目的人可能接觸比較少，建議先知道這個(gè)概念。

重定向 可以實(shí)現(xiàn)某些需要根據(jù)特定邏輯改變頁(yè)面原本路由的需求，例如簡(jiǎn)單的未登錄狀態(tài)下的頁(yè)面訪問(wèn)“個(gè)人信息”路由時(shí)應(yīng)該重定向到登錄路由頁(yè)面。

History的控制 History是Html5的新語(yǔ)法，個(gè)人覺(jué)得就是對(duì)于跳轉(zhuǎn)的時(shí)候，特別是微信小程序，就是控制點(diǎn)擊回退按鈕的時(shí)候不至于退出頁(yè)面而跳轉(zhuǎn)到自己想要的頁(yè)面

總結(jié)

其實(shí)還有很多高級(jí)應(yīng)用場(chǎng)景，我就不一一列舉出來(lái)了，因?yàn)檫@些其實(shí)最好還是上官方文檔進(jìn)行說(shuō)明，我這里只是解釋一下簡(jiǎn)單的用法，以及初學(xué)者可能對(duì)官方文檔會(huì)有誤解來(lái)進(jìn)行說(shuō)明一下，希望大家還是學(xué)會(huì)看API，附官網(wǎng)地址

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

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

相關(guān)文章

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

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

    iKcamp 評(píng)論0 收藏0

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

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

    tuniutech 評(píng)論0 收藏0

  • Vue學(xué)習(xí)日記（一）——Vue介紹

    摘要：的核心庫(kù)只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。并不是框架，只是和他旁邊的生態(tài)環(huán)境組成了一個(gè)框架，下面，貼一個(gè)官方的漸進(jìn)式框架介紹圖吧，方便理解。 前言 本人學(xué)習(xí)了一段時(shí)間的vue，并嘗試寫了一些小Demo之后，將vue投入了幾個(gè)項(xiàng)目之后，一直在邊學(xué)習(xí)邊使用，經(jīng)過(guò)看了vue,vuex,vue-route...

    王晗 評(píng)論0 收藏0

  • Vue學(xué)習(xí)日記（一）——Vue介紹

    摘要：的核心庫(kù)只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。并不是框架，只是和他旁邊的生態(tài)環(huán)境組成了一個(gè)框架，下面，貼一個(gè)官方的漸進(jìn)式框架介紹圖吧，方便理解。 前言 本人學(xué)習(xí)了一段時(shí)間的vue，并嘗試寫了一些小Demo之后，將vue投入了幾個(gè)項(xiàng)目之后，一直在邊學(xué)習(xí)邊使用，經(jīng)過(guò)看了vue,vuex,vue-route...

    MasonEast 評(píng)論0 收藏0

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

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

    tommego 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<