vue router是vue团队的研发的一款与vue.js核心深度集成的一款路由插件，使vue构建单页面程序变得非常的简单；vue router目前最新版本是4.x，也是vue3推荐使用的版本，这篇文章我们就来学习一下vue router4.x。（学习视频分享：vue视频教程）
url.hash与historyvue 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 引入 createrouterimport { 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 引入 createrouterimport { 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-viewrouter-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）工具就会将这些动态导入的组件单独打包，如下图所示：
动态路由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 = 10010push('/user/' + id)
获取路由地址可以通过useroute这个hook，用法与userouter一致。
匹配所有路由vuerouter的动态路由允许我们匹配哪些没有匹配到的路由，示例代码如下：
{ path: '/:pathmatch(.*)', component: () => import('./components/page404.vue'),},
当前面的路由匹配未成功时，就会匹配这个路由。
路由嵌套现在我们有一个需求，就是在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('./components/helloworld.vue'), children: [ { path: 'about', component: () => import('./components/about.vue'), }, { path: 'user', component: () => import('./components/user.vue'), }, ],},
子组件比较简单，只有一个4a249f0d628e2318394fd9b75b4636b1标签，最终效果如下：
写在最后这篇文章到这就结束了，总的来说比较简单没有什么太深入的东西，比较适合入门。
【相关视频教程推荐：vuejs入门教程、web前端入门】
以上就是如何使用vuerouter4.x？快速上手指南的详细内容。