中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

怎么使用VueRouter4.x

發布時間:2022-07-14 09:22:51 來源:億速云 閱讀:145 作者:iii 欄目:編程語言

這篇文章主要介紹了怎么使用VueRouter4.x的相關知識,內容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇怎么使用VueRouter4.x文章都會有所收獲,下面我們一起來看看吧。

怎么使用VueRouter4.x

URL.hash與History

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

hash歷史記錄對于沒有主機的Web應用程序(例如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>是Vue提供的自定義組件,用于創建鏈接,在Vue中并沒有使用原生的<a>,因為<a>改變URL后會重新加載頁面而<router-link>不會;關于<router-link>組件的細節支持哪些屬性,可以參考文檔。

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 './components/root.vue'
export default [
  {
    path: '/',
    // 引入組件
    component: RootComponent
  },
  {
    path: '/hello',
    // 路由懶加載引入組件
    component: () => import('./components/HelloWorld.vue')
  }
]

路由懶加載

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

component: () => import('./components/HelloWorld.vue')

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

怎么使用VueRouter4.x

動態路由

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

例如:

{
  path: '/user/:id',
  component: () => import('@/components/User')
}

在模板中跳轉如下:

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

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

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

獲取路由地址可以通過useRoute這個hook,用法與useRouter一致。

匹配所有路由

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

{
  path: '/:pathMatch(.*)',
  component: () => import('./components/Page404.vue'),
},

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

路由嵌套

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

這個時候路由嵌套的就發揮作用了,其實路由嵌套比較簡單,就是通過路由配置中的一個children屬性來實現,示例代碼如下:

HelloWorld.vue

<template>
  <h2>Hello World</h2>
  <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('./components/HelloWorld.vue'),
  children: [
    {
      path: 'about',
      component: () => import('./components/about.vue'),
    },
    {
      path: 'user',
      component: () => import('./components/user.vue'),
    },
  ],
},

子組件比較簡單,只有一個<h2>標簽

關于“怎么使用VueRouter4.x”這篇文章的內容就介紹到這里,感謝各位的閱讀!相信大家對“怎么使用VueRouter4.x”知識都有一定的了解,大家如果還想學習更多知識,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

海丰县| 永登县| 南投县| 新郑市| 城口县| 绥芬河市| 汤原县| 普兰县| 鹤岗市| 鲁甸县| 新余市| 会宁县| 青州市| 徐闻县| 平罗县| 搜索| 嘉荫县| 会昌县| 临武县| 贺州市| 错那县| 曲松县| 府谷县| 九龙城区| 林西县| 馆陶县| 温宿县| 来凤县| 五指山市| 绿春县| 泰顺县| 讷河市| 治多县| 新乡县| 马边| 鱼台县| 文化| 滕州市| 台东市| 宿迁市| 定结县|