Vue-Router2.X多種路由實現方式總結，vue-router2.x路由

最後更新：2018-02-11 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

注意：vue-router 2隻適用於Vue2.x版本，下面我們是基於vue2.0講的如何使用vue-router 2實現路由功能。

推薦使用npm安裝。

npm install vue-router

一、使用路由

在main.js中，需要明確安裝路由功能：

import Vue from 'vue'import VueRouter from 'vue-router'import App from './App.vue'Vue.use(VueRouter)

1.定義組件，這裡使用從其他檔案import進來

import index from './components/index.vue'import hello from './components/hello.vue'

2.定義路由

const routes = [ { path: '/index', component: index }, { path: '/hello', component: hello },]

3.建立 router 執行個體，然後傳 routes 配置

const router = new VueRouter({ routes})

4.建立和掛載根執行個體。通過 router 配置參數注入路由，從而讓整個應用都有路由功能

const app = new Vue({ router, render: h => h(App)}).$mount('#app')

經過上面的配置之後呢，路由匹配到的組件將會渲染到App.vue裡的<router-view></router-view>

那麼這個App.vue裡應該這樣寫：

<template> <div id="app">  <router-view></router-view> </div></template>index.html裡呢要這樣寫：<body> <div id="app"></div></body>

這樣就會把渲染出來的頁面掛載到這個id為app的div裡了。

二、重新導向 redirect

const routes = [ { path: '/', redirect: '/index'},  // 這樣進/ 就會跳轉到/index { path: '/index', component: index }]

三、嵌套路由

const routes = [ { path: '/index', component: index,  children: [   { path: 'info', component: info}  ]  }]

通過/index/info就可以訪問到info組件了

四、懶載入

const routes = [ { path: '/index', component: resolve => require(['./index.vue'], resolve) }, { path: '/hello', component: resolve => require(['./hello.vue'], resolve) },]

通過懶載入就不會一次性把所有組件都載入進來，而是當你訪問到那個組件的時候才會載入那一個。對於組件比較多的應用會提高首次載入速度。

五、<router-link>

在vue-router 2中，使用了<router-link></router-link>替換1版本中的a標籤

<!-- 字串 --><router-link to="home">Home</router-link><!-- 渲染結果 --><a href="home" rel="external nofollow" >Home</a><!-- 使用 v-bind 的 JS 運算式 --><router-link v-bind:to="'home'">Home</router-link><!-- 不寫 v-bind 也可以，就像綁定別的屬性一樣 --><router-link :to="'home'">Home</router-link><!-- 同上 --><router-link :to="{ path: 'home' }">Home</router-link><!-- 命名的路由 --><router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link><!-- 帶查詢參數，下面的結果為 /register?plan=private --><router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

六、路由資訊對象

1.$route.path

字串，對應當前路由的路徑，總是解析為絕對路徑，如 "/foo/bar"。

2.$route.params

一個 key/value 對象，包含了動態片段和全匹配片段，如果沒有路由參數，就是一個Null 物件。

3.$route.query

一個 key/value 對象，表示 URL 查詢參數。例如，對於路徑 /foo?user=1，則有 $route.query.user == 1，如果沒有查詢參數，則是個Null 物件。

4.$route.hash

當前路由的 hash 值 (不帶 #) ，如果沒有 hash 值，則為空白字串。

5.$route.fullPath

完成解析後的 URL，包含查詢參數和 hash 的完整路徑。

6.$route.matched

一個數組，包含當前路由的所有嵌套路徑片段的路由記錄。路由記錄就是 routes 配置數組中的對象副本（還有在 children 數組）。

綜合上述，一個包含重新導向、嵌套路由、懶載入的main.js如下：

import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)const router = new VueRouter({ routes:[ { path: '/', redirect: '/index' }, { path: '/index', component: resolve => require(['./components/index.vue'], resolve),  children:[   { path: 'info', component: resolve => require(['./components/info.vue'], resolve) }  ] }, { path: '/hello', component: resolve => require(['./components/hello.vue'], resolve) }, ]})const app = new Vue({ router, render: h => h(App)}).$mount('#app')

更詳細的vue-router功能請參考文檔：https://router.vuejs.org/zh-cn/

以上這篇Vue-Router2.X多種路由實現方式總結就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More