| 虽然 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 -> createMemoryHistory
4.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 4router.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 选项的子路由带来副作用。 到此这篇关于vue-router 4 你真的熟练吗？的文章就介绍到这了,更多相关vue-router 4内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
Vue状态管理之使用Pinia代替Vuex
有关vue 组件切换,动态组件,组件缓存 |
