- 当前位置：首页 >系统运维 >Vue-router 4，你真的熟练吗？
Vue-router 4，你真的熟练吗？
发布时间：2025-11-03 13:15:21 来源：创站工坊 作者：IT科技
虽然 vue-router 4 大多数 API 保持不变，但是在 vue3 中以插件形式存在，所以在使用时有一定的变化。接下来就学习学习它是如何使用的。
一、安装并创建实例
安装最新版本的 vue-router
npm install vue-router@4 或 yarn add vue-router@4安装完成之后，可以在 package.json 文件查看vue-router的版本
"dependencies": { "vue": "^3.2.16", "vue-router": "4" },新建 router 文件夹，新建 index.js文件：
import { createRouter,createWebHashHistory } from "vue-router"; const routes = [ { path:, component:()=>import("../views/login/index.vue") }, { path:/home, component:()=>import("../views/home/index.vue") } ] const router = createRouter({ history:createWebHashHistory(/), routes }) export default router然后在main.js 中引入 router 。
import { createApp } from vue import App from ./App.vue import router from "./router/index" const app = createApp(App) app.use(router) app.mount(#app)注意：之前 component 引入组件的时候，后边可以省略 .vue 后缀，但在 vue-router 4这不能省略后缀，否则就报错了。
二、vue-router4 新特性
2.1、动态路由
addRoute 动态添加路由时，有两种情况，分别为：
//动态添加路由--默认添加到根 router.addRoute({ path:/my, name:my, component:()=>import("../views/my/index.vue") }) //动态添加子路由 router.addRoute(my,{ path:/info, component:()=>import("../views/my/info.vue") })添加子路由时，第一个属性值是父级路由的 name 属性值。
2.2、与 composition 组合
在 事件中获取 router ，进行路由跳转等操作。
<template> <button @click="backToHome">跳转到首页</button> </template> <script> import { useRouter } from "vue-router" export default { setup(){ const router = useRouter() return{ backToHome(){ router.push("/") }, } } } </script>通过 useRouter 获取到路由之后再进行操作。也可以对当前路由route进行操作。以下是监听route.query的站群服务器案例：
<template> <div>监听路由变化</div> </template> <script> import { useRouter,useRoute } from "vue-router" import { watch } from "@vue/runtime-core" export default { setup(){ const route = useRoute() //route时响应式对象，可监控变化 watch(()=>route.query,query=>{ console.log(最新的,query) }) } } </script>三、导航守卫
导航守卫主要用来通过跳转或取消的方式守卫导航，有很多种方式植入路由导航中：全局的、单个路由独享的或者组件级的。
3.1、全局守卫
router.beforeEach((to,from,next)=>{ console.log(全局前置守卫); }) router.afterEach((to,from)=>{ console.log(全局后置钩子); })与之前的使用都一样，没有任何变化。
3.2、路由独享守卫
router.addRoute({ path:/my, name:my, component:()=>import("../views/my/index.vue"), beforeEnter:(to,from)=>{ console.log(路由独享守卫); } })3.3、组件内的守卫
组件内的守卫与之前使用不同，vue-router4中，需要从vue-router内引入需要的插件。
<script> import { onBeforeRouteLeave } from "vue-router" export default { setup(){ onnBeforeRouteLeave((to,from)=>{ const answer = window.confirm(是否确认离开) if(answer){ console.log(不离开); return false } }) } } </script>四、vue-router4 发生破坏性变化
4.1、实例创建方式
//以前创建方式 const router = new VueRouter({ }) new Vue({ router, render:h=>h(App) }).$mount("#app") //vue-router4创建方式 import { createRouter } from "vue-router" const router = createRouter({ }) createApp(App).use(router).mount("#app")4.2、模式声明方式改变
//之前 const router = new VueRouter({ mode:"hash" }) //新的 import { createRouter, createWebHashHistory } from "vue-router" const router = createRouter({ history:createWebHashHistory() })之前的mode替换成了 history ，它的选项变化分别为：
history -> createWebHistory hash -> createWebHashHistory abstract -> createMemoryHistory4.3、base属性被合并
base 选项被移至 createWebHistory 中。
//之前 const router = new VueRouter({ base:"/" }) //新的免费源码下载 import { createRouter, createWebHashHistory } from "vue-router" const router = createRouter({ history:createWebHashHistory(/) })4.4、通配符 * 被取消
//之前 { path:*, component:()=>import("../components/NotFound.vue") } //vue-router 4 { path:/:pathMatch(.*)*, component:()=>import("../components/NotFound.vue") } //是一个正则表达式4.5、isReady() 替代 onReady
//之前 router.onReady(onSuccess,onError)//成功和失败回调 //vue-router 4 router.isReady().then(()=>{ //成功 }).catch(err=>{ //失败 })4.6、scrollBehavior 变化
const router = createRouter({ scrollBehavior(to, from, savedPosition) { // 始终滚动到顶部 return { top: 0, left:0 } }, }) //之前使用的{ x:0, y:0 } 替换成了 { top: 0, left:0 }4.7、keep-alive 和 transition 必须用在 router-view 内部
//之前 <keep-alive> <router-view /> </keep-alive> //vue-router 4 <router-view v-slot="{component}"> <keep-alive> <component :is="component" /> </keep-alive> </router-view>4.8、router-link 移除了一部分属性
移除 append 属性
//之前 <router-link to="child" append >跳转<router-link> //vue-router 4 <router-link :to="append( $route.path , child )" append >跳转<router-link>tag 被移除
//之前 <router-link to="/" tag="span">跳转</router-link> //vue-router 4 <router-link to="/" custom> <span>跳转</span> </router-link>event 被移除
4.9、route 的 parent 属性被移除
4.10、pathToRegexpOptions选项被移除，其他内容替换
4.11、routes选项是必填项
4.12、跳转不存在的命名路由报错
之前跳转到不存在的路由，页面是空的，会重定向根路径，这是不合理的，所以vue3报错了。
4.13、缺少必填参数会抛出异常
4.14、命名子路由如果 path 为空的时候，不再追加 /
之前生成的 url 会自动追加一个 / ，如："/dash/"。副作用：给设置了 redirect 选项的b2b信息网子路由带来副作用。
- 解决电脑恢复手机时老提示错误的方法（教你如何应对电脑恢复手机时的错误提示问题）
- 探寻卡西欧海神系列的魅力（时尚与功能的完美结合，海洋航行者的首选）
- 中兴星星2号（一款性的太空探索工具）
- 探索Steam的魅力——游戏界的终极平台（从游戏购买到社交互动，一站式体验尽在掌握）
- 51系统安装教程（详解51系统的安装步骤与技巧）
- 苹果iPad7代（探索iPad7代的卓越性能与出色设计）
- ZowieFK1——一款出色的游戏鼠标（性能卓越，操作舒适，专为游戏而生）
- 电脑上如何调出小键盘？（便捷使用数字键盘，提高工作效率）
- 解决电脑恢复手机时老提示错误的方法（教你如何应对电脑恢复手机时的错误提示问题）
- 1MORE耳机的品质与表现（探索音乐新境界，畅享1MORE耳机的震撼声音）
- 电脑硬盘安装教程（详细步骤帮助你轻松完成硬盘的安装和连接）
- 探索ZecoCX3投影仪的卓越性能与出色品质（重塑影像体验，助您创造无限可能）
- 年富供应链
- 华为Mate10照相能力强劲（探索华为Mate10的卓越拍照表现）
- 电脑开机总提示错误恢复（解决电脑开机错误的有效方法）
- 宏图三胞电脑的性能与可靠性分析（一起来了解宏图三胞电脑的优势和特点）
- 荣耀4C电信增强版——性能卓越的智能手机（领先技术与出色性能的完美结合）
- Divoom蓝牙音箱——打造高品质音乐体验（探索Divoom蓝牙音箱的功能与性能，让音乐伴你随行）
- 动态渲染教程（让你的电脑运行更快更流畅，轻松应对各种任务）
- 丽台Quadro4000（性能卓越，应用广泛的创意设计加速器）
随便看看
香港云服务器源码下载IT技术网IT资讯网亿华云源码库服务器租用企商汇益华科技极客码头亿华智造益强科技亿华灵动码上建站码力社思维库智能时代亿华智慧云益强编程舍益强智未来极客编程益华科技多维IT资讯科技前瞻亿华科技益华科技技术快报益强编程堂汇智坊益强数据堂编程之道云智核亿华云IT资讯网益强智囊团亿华互联益强前沿资讯运维纵横创站工坊益强资讯优选
- Copyright © 2025 Powered by Vue-router 4，你真的熟练吗？,创站工坊 滇ICP备2023006006号-44sitemap