Vue路由

church 發布于2019-08-21 16:26 / 1732人閱讀

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

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

NPM安裝(打包)：

npm install vue-router

開始使用

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

div id="app">

Hello App!

Go to Home Go to Foo Go to Bar

動態路由

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

div id="app">

Hello App!

Go to Foo
Go to Bar
user

嵌套路由

借助 vue-router，使用嵌套路由配置，就可以很簡單地表達組件中的層級關系

實際上，在上面的動態路由的例子中就已經使用了嵌套了，定義路由時添加一個　children 屬性即可：

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

編程式導航

除了使用創建 a 標簽來定義導航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現。

router.push(location)

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

等同于調用 router.push(...)。

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

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

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

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

router.replace(location)

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

router.go(n)

這個方法的參數是一個整數，意思是在 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)

命名路由

有時候，通過一個名稱來標識一個路由顯得更方便一些，特別是在鏈接一個路由，或者是執行一些跳轉的時候。你可以在創建 Router 實例的時候，在 routes 配置中給某個路由設置名稱。

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

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

User

命名視圖

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


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


];

重定向別名

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

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

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

進階 導航鉤子

vue-router 提供的導航鉤子主要用來攔截導航，讓它完成跳轉或取消。有多種方式可以在路由導航發生時執行鉤子：全局的, 單個路由獨享的, 或者組件級的。

你可以使用 router.beforeEach 注冊一個全局的 before 鉤子：

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

鉤子函數的三個參數：

to: Route: 即將要進入的目標路由對象

from: Route: 當前導航正要離開的路由

next: Function: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

ext(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed （確認的）。

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

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

做了一個簡單的頁面，設定了一個登陸狀態，如果 isLogin 為false，那么點擊賬戶中心，則跳轉到登陸頁進行登陸



    首頁
    關于我們
    登錄
    賬戶中心
    密碼管理

路由元信息

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

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

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

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

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

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

下面例子展示在全局導航鉤子中檢查 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() // 確保一定要調用 next()
  }
})

云服務器 GPU云服務器 Vue_Vue Vue vue3 學習筆記 (五)——vue3 _vue

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88539.html

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

摘要：而路由則是使用了中新增的事件和事件。總結這一章主要是介紹了如何使用在中構建我們的前端路由。系列目錄地址一、基礎知識概覽第一章 - 一些基礎概念（posted at 2018-10-31）第二章 - 常見的指令的使用（posted at 2018-11-01）第三章 - 事件修飾符的使用（posted at 2018-11-02）第四章 - 頁面元素樣式的設定（posted a...

cpupro 2019-05-22 19:26 評論0 收藏0
服務端預渲染之Nuxt(路由篇)

摘要：前面既然說到了會把文件夾下面的所有文件編譯成路由，那么子路由需要使用文件夾嵌套才行。客戶端首次訪問的頁面會在服務端做輸出，一旦渲染完成之后，則不會再在服務端輸出，則會一直在客戶端進行輸出了。服務端預渲染之Nuxt - 使用現在大多數開發都是基于Vue或者React開發的，能夠達到快速開發的效果，也有一些不足的地方,Nuxt能夠在服務端做出渲染，然后讓搜索引擎在爬取數據的時候能夠讀到...

yuanxin 2019-08-23 16:48 評論0 收藏0
從頭開始學習vue-router

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

tommego 2019-08-23 12:55 評論0 收藏0
從頭開始學習vue-router

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

jhhfft 2019-08-02 11:56 評論0 收藏0
從頭開始學習vue-router

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

frontoldman 2019-08-29 17:11 評論0 收藏0
使用 webpack 插件自動生成 vue 路由文件

摘要：從長遠來看，使用插件自動生成路由是具有一定好處的。現在使用插件來自動生成路由后，就無需再關心和維護這些路由文件了。一款自動生成 vue 路由文件的 webpack 插件 vue-route-webpack-plugin 在項目中試點成功了，現在在項目中已經不需要再維護路由配置文件了，由插件自動生成，節省了大家維護路由的時間。從長遠來看，使用插件自動生成路由是具有一定好處的。當項目中...

kviccn 2019-08-26 14:04 評論0 收藏0