站長資訊網(wǎng)如何使用VueRouter4.x？下面本篇文章就來給大家分享快速上手教程，介紹一下10分鐘快速上手VueRouter4.x的方法，希望對(duì)大家有所幫助！
Vue Router是Vue團(tuán)隊(duì)的研發(fā)的一款與Vue.js核心深度集成的一款路由插件，使Vue構(gòu)建單頁面程序變得非常的簡單；Vue Router目前最新版本是4.X，也是Vue3推薦使用的版本，這篇文章我們就來學(xué)習(xí)一下Vue Router4.X。（學(xué)習(xí)視頻分享：vue視頻教程）
URL.hash與History
Vue Router中存在兩種history（記錄歷史路由），分別是URL.hash和HTML5中提供的History兩種。
hash歷史記錄對(duì)于沒有主機(jī)的Web應(yīng)用程序（例如file://），或當(dāng)配置服務(wù)器不能處理任意的URL時(shí)非常有用，但是hash的SEO非常差勁；
History歷史是HTML5中新增的，對(duì)于IE來說不是很友好，但是Vue3都放棄IE了，你也就不用考慮IE了；這種方式是目前最常見的一種方式，但是應(yīng)用程序必須通過http協(xié)議被提供服務(wù)。
安裝與使用流程
首先我們安裝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 創(chuàng)建路由實(shí)例，并傳遞對(duì)應(yīng)配置 const router = createRouter({ // history 模式 這里使用createWebHistory history: createWebHistory(), // 傳遞路由映射表 routes }) createApp(App).use(router).mount('#app')
上面的代碼中的routes如果多的話，可以定義一個(gè)router.js文件，將其進(jìn)行抽離，示例代碼如下：
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 創(chuàng)建路由實(shí)例，并傳遞對(duì)應(yīng)配置 const router = createRouter({ // history 模式 這里使用createWebHistory history: createWebHistory(), // 傳遞路由映射表 routes }) createApp(App).use(router).mount('#app')
或者**直接在****router.js中直接導(dǎo)出一個(gè)路由實(shí)例，在main.js**中使用即可（這種方式更常用）。
router-link和router-view
router-link
<router-link>是Vue提供的自定義組件，用于創(chuàng)建鏈接，在Vue中并沒有使用原生的<a>，因?yàn)?code><a>改變URL后會(huì)重新加載頁面而<router-link>不會(huì)；關(guān)于<router-link>組件的細(xì)節(jié)支持哪些屬性，可以參考文檔。
router-view
<router-view>組件用于與URL對(duì)應(yīng)的組件，例如下面這段代碼：
<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') } ]
關(guān)于其他配置項(xiàng)，可以參考文檔。
代碼運(yùn)行結(jié)果如下所示：
路由懶加載
當(dāng)我們的應(yīng)用越來越大時(shí)，打包后的JavaScript代碼也會(huì)特別的大，這個(gè)時(shí)候需要我們將整個(gè)應(yīng)用拆分為不同的塊，而Vue Router就支持這個(gè)功能，我們只需要使用動(dòng)態(tài)導(dǎo)入替換靜態(tài)導(dǎo)入即可，就比如上面那段代碼：
component: () => import('./components/HelloWorld.vue')
然后打包（webpack、Vite）工具就會(huì)將這些動(dòng)態(tài)導(dǎo)入的組件單獨(dú)打包，如下圖所示：
動(dòng)態(tài)路由
VueRouter允許我們動(dòng)態(tài)的去設(shè)置路由匹配規(guī)則，例如我們現(xiàn)在有一個(gè)User組件，組件的內(nèi)容會(huì)根據(jù)不同的ID展示不同的內(nèi)容，設(shè)置方法只需要通過:參數(shù)名的形式去設(shè)置即可。
例如：
{ path: '/user/:id', component: () => import('@/components/User') }
在模板中跳轉(zhuǎn)如下：
<router-link to="/user/10010"></router-link>
或者通過useRouter這個(gè)hook提供的push方法，例如：
import { useRouter } from 'vue-router' const {push} = useRouter() push({ path: '/user', params: { id: 10010 } }) // 或者 let id = 10010 push('/user/' + id)
獲取路由地址可以通過useRoute這個(gè)hook，用法與useRouter一致。
匹配所有路由
VueRouter的動(dòng)態(tài)路由允許我們匹配哪些沒有匹配到的路由，示例代碼如下：
{ path: '/:pathMatch(.*)', component: () => import('./components/Page404.vue'), },
當(dāng)前面的路由匹配未成功時(shí)，就會(huì)匹配這個(gè)路由。
路由嵌套
現(xiàn)在我們有一個(gè)需求，就是在HelloWorld組件下存兩個(gè)組件，需要切換著兩個(gè)組件。
這個(gè)時(shí)候路由嵌套的就發(fā)揮作用了，其實(shí)路由嵌套比較簡單，就是通過路由配置中的一個(gè)children屬性來實(shí)現(xiàn)，示例代碼如下：
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('./components/HelloWorld.vue'), children: [ { path: 'about', component: () => import('./components/about.vue'), }, { path: 'user', component: () => import('./components/user.vue'), }, ], },
子組件比較簡單，只有一個(gè)<h1>標(biāo)簽，最終效果如下：
寫在最后
這篇文章到這就結(jié)束了，總的來說比較簡單沒有什么太深入的東西，比較適合入門。
【相關(guān)視頻教程推薦：vuejs入門教程、web前端入門】
