虽然vue-router4的大部分API没有变化，但是在vue3中都是以插件的形式存在，所以在使用的时候会有一定的变化。接下来，学习如何使用它。1.安装并创建实例安装最新版本的vue-routernpminstallvue-router@4或yarnaddvue-router@4安装完成后，可以在package.json文件“dependencies”中查看vue-router的版本：{"vue":"^3.2.16","vue-router":"4"}，新建router文件夹，新建index.js文件：import{createRouter,createWebHashHistory}from"vue-router";constroutes=[{path:'',component:()=>import("../views/login/index.vue")},{path:'/home',component:()=>import("../views/home/index.vue")}]constrouter=createRouter({history:createWebHashHistory('/'),routes})exportdefaultrouter然后在main.js中引入router。import{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom"./router/index"constapp=createApp(App)app.use(router)app.mount('#app')注意：前面的组件介绍使用组件时，可以省略.vue后缀，但是在vue-router4中，不能省略后缀，否则会报错。2.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，进行路由跳转等操作。跳转到主页在继续之前通过useRouter获取路由。也可以在当前routeroute上操作。下面是一个监听route.query的案例："@vue/runtime-core"exportdefault{setup(){constroute=useRoute()//Route是响应式对象，可以监听变化watch(()=>route.query,query=>{console.log('latest',query)})}}3.NavigationguardNavigationguard主要用于守卫跳转或取消导航。路由导航的植入方式有很多种：全局的、单路由独占的或者组件级的。3.1.全局守卫router.beforeEach((to,from,next)=>{console.log('globalpre-guard');})router.afterEach((to,from)=>{console.log('globalPosthook');})和以前一样，没有任何变化。3.2.Router独占守卫router.addRoute({path:'/my',name:'my',component:()=>import("../views/my/index.vue"),beforeEnter:(to,from)=>{console.log('专属路由守卫');}})3.3.组件中的守卫组件中的守卫与上一个不同。在vue-router4中，您需要从vue-router插件中导入所需的插件。4.vue-router4有破坏性变化=>h(App)}).$mount("#app")//vue-router4创建方法import{createRouter}from"vue-router"constrouter=createRouter({})createApp(App).use(router).mount("#app")4.2、方式声明方式改变//beforeconstruuter=newVueRouter({mode:"hash"})//newimport{createRouter,createWebHashHistory}from"vue-router"constrouter=createRouter({history:createWebHashHistory()})之前的模式被history取代，其选项变化如下：history->createWebHashHistoryhash->createWebHashHistoryabstract->createMemoryHistory4.3，base属性合并，base选项移至createWebHistory。//beforeconstruuter=newVueRouter({base:"/"})//newimport{createRouter,createWebHashHistory}from"vue-router"constrouter=createRouter({history:createWebHashHistory('/')})4.4，通配符*取消//在{path:'*',component:()=>import("../components/NotFound.vue")}//vue-router4{path:'/:pathMatch(.*)*',component之前:()=>import("../components/NotFound.vue")}//是一个正则表达式4.5，isReady()代替onReady//之前router.onReady(onSuccess,onError)//成功和失败回调//vue-router4router.isReady().then(()=>{//success}).catch(err=>{//failure})4.6、scrollBehavior改变constrouter=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中使用//before//vue-router44.8，柔三一ink去掉一些属性，去掉append属性//beforejump//vue-router4jump标签被移除//beforejump//vue-router4Jumpevent被移除4.9，route的parent属性被移除4.10，pathToRegexpOptions选项被移除，其他内容被替换4.11，routes选项是必需的。4.12.跳转到一个不存在的命名路由。报错前跳转到不存在的路由。页面为空，根路径将被重定向。这是不合理的，所以vue3报错4.13。缺少必填字段参数将抛出异常4.14。如果命名子路由的路径为空，则不会在之前生成的url中添加/，例如：“/dash/”。副作用：给设置了重定向选项的子路由带来副作用。
