首頁 >web前端 >Vue.js >如何使用VueRouter4.x?快速上手指南

如何使用VueRouter4.x?快速上手指南

青灯夜游
青灯夜游轉載
2022-07-13 20:11:352188瀏覽

如何使用VueRouter4.x?以下這篇文章就來跟大家分享快速上手教程,介紹一下10分鐘快速上手VueRouter4.x的方法,希望對大家有幫助!

如何使用VueRouter4.x?快速上手指南

Vue Router是Vue團隊的研發的一款與Vue.js核心深度整合的一款路由插件,讓Vue建立單頁程式變得非常簡單的; Vue Router目前最新版本是4.X,也是Vue3推薦使用的版本,這篇文章我們就來學習Vue Router4.X。 (學習影片分享:vue影片教學

URL.hash與History

Vue Router中存在兩種history(記錄歷史路由),分別是URL.hash和HTML5中提供的History兩種。

hash歷史記錄對於沒有主機的網路應用程式(例如file://),或當設定伺服器不能處理任意的URL時非常有用,但是hash的SEO非常差勁;

History歷史是HTML5中新增的,對於IE來說不是很友好,但是Vue3都放棄IE了,你也就不用考慮IE了;這種方式是目前最常見的一種方式,但是應用程式必須透過http協定被提供服務。

安裝與使用流程

首先我們安裝Vue Router,指令如下:

npm i vue-router

然後在main.js中寫入如下程式碼:

import { createApp } from 'vue'
import App from './App.vue'
// 1 引入 createRouter
import { createRouter, createWebHistory } from 'vue-router'
// 2 定义路由映射表
const routes = [
  /* more router */
]
// 3 创建路由实例,并传递对应配置
const router = createRouter({
  // history 模式 这里使用createWebHistory
  history: createWebHistory(),
  // 传递路由映射表
  routes
})
createApp(App).use(router).mount('#app')

上面的程式碼中的routes如果多的話,可以定義一個router.js文件,將其進行抽離,範例程式碼如下:

router.js

export default [
  /* more router */
]

#main.js

import { createApp } from 'vue'
import App from './App.vue'
// 2 引入路由映射表
import routes from './router'

// 1 引入 createRouter
import { createRouter, createWebHistory } from 'vue-router'
// 3 创建路由实例,并传递对应配置
const router = createRouter({
  // history 模式 这里使用createWebHistory
  history: createWebHistory(),
  // 传递路由映射表
  routes
})
createApp(App).use(router).mount('#app')

或**直接在****router.js中直接匯出一個路由實例,在main.js**中使用即可(這種方式比較常用)。

router-link與router-view

router-link

<router-link></router-link>是Vue提供的自訂元件,用來建立鏈接,在Vue中並沒有使用原生的<a></a>,因為<a></a>改變URL後會重新載入頁面而<router-link></router-link>不會;關於<router-link></router-link>元件的細節支援哪些屬性,可以參考文件

router-view

<router-view></router-view>元件用於與URL對應的元件,例如下面這段程式碼:

<template>
  <router-link to="/hello"
    ><img alt="Vue logo" src="./assets/logo.png"
  /></router-link>
  <router-view></router-view>
</template>

然後我們的router.js的程式碼如下:

import RootComponent from &#39;./components/root.vue&#39;
export default [
  {
    path: &#39;/&#39;,
    // 引入组件
    component: RootComponent
  },
  {
    path: &#39;/hello&#39;,
    // 路由懒加载引入组件
    component: () => import(&#39;./components/HelloWorld.vue&#39;)
  }
]

關於其他設定項,可以參考文件

程式碼運行結果如下所示:

如何使用VueRouter4.x?快速上手指南

路由懶載入

當我們的應用程式越來越大時,打包後的JavaScript程式碼也會特別的大,這個時候需要我們將整個應用程式拆分為不同的區塊,而Vue Router就支援這個功能,我們只需要使用動態導入替換靜態導入即可,就例如上面那段程式碼:

component: () => import(&#39;./components/HelloWorld.vue&#39;)

然後打包(webpack、Vite)工具就會將這些動態導入的元件單獨打包,如下圖所示:

如何使用VueRouter4.x?快速上手指南

動態路由

VueRouter允許我們動態的去設定路由比對規則,例如我們現在有一個User元件,元件的內容會根據不同的ID展示不同的內容,設定方法只需要透過:參數名稱的形式去設定即可。

例如:

{
  path: &#39;/user/:id&#39;,
  component: () => import(&#39;@/components/User&#39;)
}

在模板中跳轉如下:

<router-link to="/user/10010"></router-link>

或透過useRouter這個hook提供的push#方法,例如:

import { useRouter } from &#39;vue-router&#39;
const {push} = useRouter()
push({
  path: &#39;/user&#39;,
  params: { id: 10010 }
})
// 或者
let id = 10010
push(&#39;/user/&#39; + id)

取得路由位址可以透過useRoute這個hook,用法與useRouter一致。

匹配所有路由

VueRouter的動態路由允許我們匹配哪些沒有匹配到的路由,示例代碼如下:

{
  path: &#39;/:pathMatch(.*)&#39;,
  component: () => import(&#39;./components/Page404.vue&#39;),
},

當前面的路由匹配未成功時,就會匹配這個路由。

路由巢狀

現在我們有一個需求,就是在HelloWorld元件下儲存兩個元件,需要切換兩個元件。

这个时候路由嵌套的就发挥作用了,其实路由嵌套比较简单,就是通过路由配置中的一个children属性来实现,示例代码如下:

HelloWorld.vue

<template>
  <h1>Hello World</h1>
  <div
    style="
      display: flex;
      justify-content: space-between;
      width: 240px;
      margin: 0 auto;
    "
  >
    <router-link to="about">about</router-link>
    <router-link to="user">user</router-link>
  </div>
  <router-view></router-view>
</template>

router.js

{
  path: '/hello',
  // 路由懒加载引入组件
  component: () => import(&#39;./components/HelloWorld.vue&#39;),
  children: [
    {
      path: 'about',
      component: () => import('./components/about.vue'),
    },
    {
      path: 'user',
      component: () => import('./components/user.vue'),
    },
  ],
},

子组件比较简单,只有一个<h1></h1>标签,最终效果如下:

如何使用VueRouter4.x?快速上手指南

写在最后

这篇文章到这就结束了,总的来说比较简单没有什么太深入的东西,比较适合入门。

【相关视频教程推荐:vuejs入门教程web前端入门

以上是如何使用VueRouter4.x?快速上手指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除