Vue-Router2實作路由功能實例講解-js教程-PHP中文網

首頁

web前端

js教程

Vue-Router2實作路由功能實例講解

小云云

May 18, 2018 pm 03:41 PM

功能實例

vue-router是Vue.js官方的路由插件，它和vue.js是深度整合的，適合用於建立單一頁面應用程式。 vue的單一頁面應用程式是基於路由和元件的，路由用於設定存取路徑，並將路徑和元件對應起來。傳統的頁面應用，是用一些超連結來實現頁面切換和跳轉的。在vue-router單一頁面應用程式中，則是路徑之間的切換，也就是元件的切換。

注意：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>

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

<template>
 <p id="app">
  <router-view></router-view>
 </p>
</template>

登入後複製

index.html裡呢要這樣寫：

<body>
 <p id="app"></p>
</body>

登入後複製

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

二、重定向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) },
]

登入後複製

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

五、

在vue-router 1中，使用的是

在vue-router 2中，使用了替換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="&#39;home&#39;">Home</router-link>
<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="&#39;home&#39;">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: &#39;home&#39; }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: &#39;user&#39;, params: { userId: 123 }}">User</router-link>
<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: &#39;register&#39;, query: { plan: &#39;private&#39; }}">Register</router-link>

登入後複製

六、路由資訊物件

1.$route.path

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

2.$route.params

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

3.$route.query

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

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')

登入後複製

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7784

Java教學

1644

CakePHP 教程

1400

Laravel 教程

1297

PHP教程

1234

Related knowledge

豆包app有什麼功能 Mar 01, 2024 pm 10:04 PM

豆包app裡會有很多ai創作的功能，那麼豆包app有什麼功能呢？使用者可以透過這個軟體來創作繪畫，和ai進行聊天，也能夠為用戶生成文章，幫助大家搜尋歌曲等。這篇豆包app功能介紹就能夠告訴大家具體的操作方法，以下就是具體內容，趕快看看吧！豆包app有什麼功能答：可以畫畫、聊天、寫文、找歌。功能介紹：1、問題查詢：可以透過ai來更快的找到問題的答案，什麼樣的問題都是可以詢問。 2.圖片生成：可以有ai來為大家創造不同的圖片，只需要告訴大家大概的要求。 3.ai聊天：能夠為用戶創建一個可以聊天的ai，

vivox100s和x100區別：效能比較及功能解析 Mar 23, 2024 pm 10:27 PM

vivox100s和x100手機都是vivo手機產品線中的代表機型，它們分別代表了vivo在不同時間段內的高端技術水平，因此這兩款手機在設計、性能和功能上均有一定區別。本文將從效能比較和功能解析兩個面向對這兩款手機進行詳細比較，幫助消費者更好地選擇適合自己的手機。首先，我們來看vivox100s和x100在效能上的比較。 vivox100s搭載了最新的

自媒體到底是什麼？它的主要特點和功能有哪些？ Mar 21, 2024 pm 08:21 PM

隨著網路的快速發展，自媒體這個概念已經深入人心。那麼，自媒體到底是什麼呢？它有哪些主要特點和功能呢？接下來，我們將一一探討這些問題。一、自媒體到底是什麼？自媒體，顧名思義，就是自己就是媒體。它是指透過網路平台，個人或團隊可以自主創建、編輯、發布和傳播內容的資訊載體。不同於傳統媒體，如報紙、電視、電台等，自媒體具有更強的互動性和個人化，讓每個人都能成為訊息的生產者和傳播者。二、自媒體的主要特色和功能有哪些？ 1.低門檻：自媒體的崛起降低了進入媒體產業的門檻，不再需要繁瑣的設備和專業的團隊，一部手

小紅書帳號管理軟體有哪些功能？怎麼經營小紅書帳號？ Mar 21, 2024 pm 04:16 PM

隨著小紅書在年輕人中的流行，越來越多的人開始利用這個平台分享各方面的經驗和生活見解。如何有效管理多個小紅書帳號成為關鍵問題。在本文中，我們將討論一些小紅書帳號管理軟體的功能，並探討如何更好地經營小紅書帳號。隨著社群媒體的發展，許多人發現自己需要管理多個社群帳號。對於小紅書用戶來說，這也是一個挑戰。一些小紅書帳號管理軟體可以幫助使用者更輕鬆地管理多個帳號，包括自動發佈內容、定時發布、資料分析等功能。透過這些工具，使用者可以更有效率地管理他們的帳號，提高帳號的曝光率和關注。另一、小紅書帳號管理軟體有

PHP技巧：快速實現返回上一頁功能 Mar 09, 2024 am 08:21 AM

PHP技巧：快速實現回到上一頁功能在網頁開發中，常常會遇到需要實作返回上一頁的功能。這樣的操作可以提高使用者體驗，讓使用者更方便地在網頁之間進行導航。在PHP中，我們可以透過一些簡單的程式碼來實現這項功能。本文將介紹如何快速實現返回上一頁功能，並提供具體的PHP程式碼範例。在PHP中，我們可以使用$_SERVER['HTTP_REFERER']來取得上一頁的URL

什麼是Discuz？ Discuz的定義與功能介紹 Mar 03, 2024 am 10:33 AM

《探索Discuz：定義、功能及程式碼範例》隨著網路的快速發展，社群論壇已成為人們獲取資訊、交流觀點的重要平台。在眾多的社群論壇系統中，Discuz作為國內較知名的一種開源論壇軟體，備受廣大網站開發者和管理員的青睞。那麼，什麼是Discuz？它又有哪些功能，能為我們的網站提供怎樣的幫助呢？本文將對Discuz進行詳細介紹，並附上具體的程式碼範例，幫助讀者更

Linux下GDM的功能與作用詳解 Mar 01, 2024 pm 04:18 PM

Linux下GDM的功能和作用詳解在Linux作業系統中，GDM（GNOMEDisplayManager）是一種圖形化登入管理器，它提供了使用者在系統中登入和登出的介面。 GDM通常是GNOME桌面環境的一部分，但也可以被其他桌面環境所使用。 GDM的功能不僅是提供一個登入介面，還包括使用者會話管理、螢幕保護、自動登入等功能。 GDM的功能主要包括以下幾個面向：

PHP是做什麼用的？探究PHP的作用與功能 Mar 24, 2024 am 11:39 AM

PHP是一種廣泛應用於Web開發的伺服器端腳本語言，它主要的功能是產生動態網頁內容，與HTML結合使用，可以創造出豐富多彩的網頁。 PHP的功能強大，它可以執行各種資料庫操作、檔案操作、表單處理等任務，為網站提供強大的互動性和功能性。在接下來的文章中，我們將進一步探究PHP的作用與功能，並配以詳細的程式碼範例。首先，我們來看看PHP的常見用途：動態網頁生成：P

See all articles

Vue-Router2實作路由功能實例講解

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題