Vue路由

church 發(fā)布于2019-08-21 16:26 / 1783人閱讀

摘要：定義路由創(chuàng)建實例，然后傳配置創(chuàng)建和掛載根實例。有多種方式可以在路由導(dǎo)航發(fā)生時執(zhí)行鉤子全局的單個路由獨享的或者組件級的。例如，根據(jù)上面的路由配置，這個將會匹配父路由記錄以及子路由記錄。因此，我們需要遍歷來檢查路由記錄中的字段。

Vue-router(路由) 安裝 CDN引入(非打包)：

NPM安裝(打包)：

npm install vue-router

開始使用

在使用Vue.js的時候，我們通過組合組件來組成應(yīng)用程序，現(xiàn)在我們要把vue-router添加進來，只需要將組件（components）映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們。

div id="app">

Hello App!

Go to Home Go to Foo Go to Bar

動態(tài)路由

例如，我們有一個 User 組件，對于所有 ID 各不相同的用戶，都要使用這個組件來渲染。那么，我們可以在 vue-router 的路由路徑中使用『動態(tài)路徑參數(shù)』（dynamic segment）來達(dá)到這個效果：

div id="app">

Hello App!

Go to Foo
Go to Bar
user

嵌套路由

借助 vue-router，使用嵌套路由配置，就可以很簡單地表達(dá)組件中的層級關(guān)系
實際上，在上面的動態(tài)路由的例子中就已經(jīng)使用了嵌套了，定義路由時添加一個　children 屬性即可：

const routes=[
    {
        path:"/user",
        component:User,
        children:[
            {
                path:":name",
                component:{
                    template:"pureview"
                }
            }
        ]
    }
]

編程式導(dǎo)航

除了使用  創(chuàng)建 a 標(biāo)簽來定義導(dǎo)航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現(xiàn)。

router.push(location)

想要導(dǎo)航到不同的 URL，則使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，所以，當(dāng)用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。

等同于調(diào)用 router.push(...)。

// 字符串
router.push("home")

// 對象
router.push({ path: "home" })

// 命名的路由
router.push({ name: "user", params: { userId: 123 }})

// 帶查詢參數(shù)，變成 /register?plan=private
router.push({ path: "register", query: { plan: "private" }})

router.replace(location)

跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄。

router.go(n)

這個方法的參數(shù)是一個整數(shù)，意思是在 history 記錄中向前或者后退多少步，類似 window.history.go(n)。

// 在瀏覽器記錄中前進一步，等同于 history.forward()
router.go(1)

// 后退一步記錄，等同于 history.back()
router.go(-1)

// 前進 3 步記錄
router.go(3)

// 如果 history 記錄不夠用，那就默默地失敗唄
router.go(-100)
router.go(100)

命名路由

有時候，通過一個名稱來標(biāo)識一個路由顯得更方便一些，特別是在鏈接一個路由，或者是執(zhí)行一些跳轉(zhuǎn)的時候。你可以在創(chuàng)建 Router 實例的時候，在 routes 配置中給某個路由設(shè)置名稱。

const router = new VueRouter({
  routes: [
    {
      path: "/user/:userId",
      name: "user",
      component: User
    }
  ]
})

要鏈接到一個命名路由，可以給 router-link 的 to 屬性傳一個對象：

User

命名視圖

有時候想同時（同級）展示多個視圖，而不是嵌套展示，例如創(chuàng)建一個布局，有 sidebar（側(cè)導(dǎo)航）和 main（主內(nèi)容）兩個視圖，這個時候命名視圖就派上用場了。你可以在界面中擁有多個多帶帶命名的視圖，而不是只有一個多帶帶的出口。如果 router-view 沒有設(shè)置名字，那么默認(rèn)為 default。一個視圖使用一個組件渲染，因此對于同個路由，多個視圖就需要多個組件。確保正確使用 components 配置（帶上 s）：


  
var routes=[
            
    components:{
        a:{template:"首頁,..."},
        b:{template:"內(nèi)容部分。。。。"},
    }


];

重定向別名

重定向的意思就是當(dāng)你訪問 a 的時候，url 會被替換為 b ，于是匹配路由 b
重定向也是通過 routes 配置來完成，下面例子是從 /a 重定向到 /b：

var router=new VueRouter({
    routes:[
        {
            path:"/a",
            redirect:"/b"
        }
    ]
})

/a 的別名是 /b，意味著，當(dāng)用戶訪問 /b 時，URL 會保持為 /b，但是路由匹配則為 /a，就像用戶訪問 /a 一樣。

進階 導(dǎo)航鉤子

vue-router 提供的導(dǎo)航鉤子主要用來攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或取消。有多種方式可以在路由導(dǎo)航發(fā)生時執(zhí)行鉤子：全局的, 單個路由獨享的, 或者組件級的。
你可以使用 router.beforeEach 注冊一個全局的 before 鉤子：

router .beforeEach((to,from,next)=>{
    //...
})

鉤子函數(shù)的三個參數(shù)：

to: Route: 即將要進入的目標(biāo) 路由對象

from: Route: 當(dāng)前導(dǎo)航正要離開的路由

next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。

ext(): 進行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）。

next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕），那么 URL 地址會重置到 from 路由對應(yīng)的地址。

next("/") 或者 next({ path: " / " }): 跳轉(zhuǎn)到一個不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進行一個新的導(dǎo)航。

做了一個簡單的頁面，設(shè)定了一個登陸狀態(tài)，如果 isLogin 為false，那么點擊賬戶中心，則跳轉(zhuǎn)到登陸頁進行登陸



    首頁
    關(guān)于我們
    登錄
    賬戶中心
    密碼管理

路由元信息

定義路由的時候可以配置 meta 字段：

const router = new VueRouter({
  routes: [
    {
      path: "/foo",
      component: Foo,
      children: [
        {
          path: "bar",
          component: Bar,
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

那么如何訪問這個 meta 字段呢？

首先，我們稱呼 routes 配置中的每個路由對象為路由記錄。路由記錄可以是嵌套的，因此，當(dāng)一個路由匹配成功后，他可能匹配多個路由記錄。

例如，根據(jù)上面的路由配置，/foo/bar 這個 URL 將會匹配父路由記錄以及子路由記錄。

一個路由匹配到的所有路由記錄會暴露為 $route 對象（還有在導(dǎo)航鉤子中的 route 對象）的 $route.matched 數(shù)組。因此，我們需要遍歷 $route.matched 來檢查路由記錄中的 meta 字段。

下面例子展示在全局導(dǎo)航鉤子中檢查 meta 字段：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 此路由需要驗證，檢查是否登錄
    // 如果不需要，則重定向到登錄頁面。
    if (!auth.loggedIn()) {
      next({
        path: "/login",
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 確保一定要調(diào)用 next()
  }
})

GPU云服務(wù)器云服務(wù)器 Vue_Vue Vue vue3 學(xué)習(xí)筆記 (五)——vue3 _vue

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

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

發(fā)表評論

登陸后可評論

0條評論

church

男|高級講師

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

TA的文章

穩(wěn)愛云：香港CN2 GIA，2核/2G/20M帶寬，月付34元，美國CERA聯(lián)通首月半價25元，簡單

閱讀 3470·2021-10-11 11:06
Making An Indicator With Pure CSS

閱讀 2258·2019-08-29 11:10
[譯] 究竟什么是DOM？!

閱讀 2005·2019-08-26 18:18
mac 下安裝Nginx 和反向代理

閱讀 3310·2019-08-26 13:34
Promise 對象的理解

閱讀 1615·2019-08-23 16:45
js秒數(shù)轉(zhuǎn)換時分秒（hh:mm:ss）

閱讀 1100·2019-08-23 16:29
用Vue開發(fā)仿旅游站webapp項目總結(jié) （上）

閱讀 2859·2019-08-23 13:11
PDF.js實現(xiàn)個性化PDF渲染（文本復(fù)制）

閱讀 3313·2019-08-23 12:58

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

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

Vue路由

Hello App!

Hello App!

相關(guān)文章

**【Vue.js 牛刀小試】：第十二章 - 使用 Vue Router 實現(xiàn) Vue 中的前端路由控制**

服務(wù)端預(yù)渲染之Nuxt(路由篇)

**從頭開始學(xué)習(xí)vue-router**

**從頭開始學(xué)習(xí)vue-router**

**從頭開始學(xué)習(xí)vue-router**

**使用 webpack 插件自動生成 vue 路由文件**

發(fā)表評論

0條評論

church

男|高級講師

TA的文章

穩(wěn)愛云：香港CN2 GIA，2核/2G/20M帶寬，月付34元，美國CERA聯(lián)通首月半價25元，簡單

Making An Indicator With Pure CSS

[譯] 究竟什么是DOM？!

mac 下安裝Nginx 和反向代理

Promise 對象的理解

js秒數(shù)轉(zhuǎn)換時分秒（hh:mm:ss）

用Vue開發(fā)仿旅游站webapp項目總結(jié) （上）

PDF.js實現(xiàn)個性化PDF渲染（文本復(fù)制）

最新活動

資訊專欄INFORMATION COLUMN

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

Vue路由

Hello App!

Hello App!

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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