Vue-router 4,你真的熟练吗?

开发 前端
虽然 vue-router 4 大多数 API 保持不变,但是在 vue3 中以插件形式存在,所以在使用时有一定的变化。接下来就学习学习它是如何使用的。

[[434466]]

虽然 vue-router 4 大多数 API 保持不变,但是在 vue3 中以插件形式存在,所以在使用时有一定的变化。接下来就学习学习它是如何使用的。

一、安装并创建实例

安装最新版本的 vue-router

  1. npm install vue-router@4  
  2.  
  3. 或 
  4.  
  5. yarn add vue-router@4 

 安装完成之后,可以在 package.json 文件查看vue-router的版本

  1. "dependencies": { 
  2.  "vue""^3.2.16"
  3.  "vue-router""4" 
  4. }, 

 新建 router 文件夹,新建 index.js文件:

  1. import { createRouter,createWebHashHistory } from "vue-router"
  2.  
  3. const routes = [ 
  4.  { 
  5.   path:''
  6.   component:()=>import("../views/login/index.vue"
  7.  }, 
  8.  { 
  9.   path:'/home'
  10.   component:()=>import("../views/home/index.vue"
  11.  } 
  12.  
  13. const router = createRouter({ 
  14.  history:createWebHashHistory('/'), 
  15.  routes 
  16. }) 
  17.  
  18. export default router 

 然后在main.js 中引入 router 。

  1. import { createApp } from 'vue' 
  2. import App from './App.vue' 
  3. import router from "./router/index" 
  4.  
  5. const app = createApp(App) 
  6. app.use(router) 
  7. app.mount('#app'

 注意:之前 component 引入组件的时候,后边可以省略 .vue 后缀,但在 vue-router 4这不能省略后缀,否则就报错了。

二、vue-router4 新特性

2.1、动态路由

addRoute 动态添加路由时,有两种情况,分别为:

  1. //动态添加路由--默认添加到根 
  2. router.addRoute({ 
  3.  path:'/my'
  4.  name:'my'
  5.  component:()=>import("../views/my/index.vue"
  6. }) 
  7.  
  8. //动态添加子路由 
  9. router.addRoute('my',{ 
  10.  path:'/info'
  11.  component:()=>import("../views/my/info.vue"
  12. }) 

 添加子路由时,第一个属性值是父级路由的 name 属性值。

2.2、与 composition 组合

在 事件中获取 router ,进行路由跳转等操作。

  1. <template> 
  2.   <button @click="backToHome">跳转到首页</button> 
  3. </template> 
  4.  
  5. <script> 
  6. import { useRouter } from "vue-router" 
  7. export default { 
  8.  setup(){ 
  9.   const router = useRouter() 
  10.   return
  11.    backToHome(){ 
  12.     router.push("/"
  13.    }, 
  14.   } 
  15.  } 
  16. </script> 

通过 useRouter 获取到路由之后再进行操作。也可以对当前路由route进行操作。以下是监听route.query的案例:

  1. <template> 
  2.   <div>监听路由变化</div> 
  3. </template> 
  4.  
  5. <script> 
  6. import { useRouter,useRoute } from "vue-router" 
  7. import { watch } from "@vue/runtime-core" 
  8. export default { 
  9.  setup(){ 
  10.   const route = useRoute() 
  11.   //route时响应式对象,可监控变化 
  12.   watch(()=>route.query,query=>{ 
  13.    console.log('最新的',query) 
  14.   }) 
  15.  } 
  16. </script> 

三、导航守卫

导航守卫主要用来通过跳转或取消的方式守卫导航,有很多种方式植入路由导航中:全局的、单个路由独享的或者组件级的。

3.1、全局守卫

  1. router.beforeEach((to,from,next)=>{ 
  2.  console.log('全局前置守卫'); 
  3. }) 
  4. router.afterEach((to,from)=>{ 
  5.  console.log('全局后置钩子'); 
  6. }) 

 与之前的使用都一样,没有任何变化。

3.2、路由独享守卫

  1. router.addRoute({ 
  2.  path:'/my'
  3.  name:'my'
  4.  component:()=>import("../views/my/index.vue"), 
  5.  beforeEnter:(to,from)=>{ 
  6.   console.log('路由独享守卫'); 
  7.  } 
  8. }) 

3.3、组件内的守卫

组件内的守卫与之前使用不同,vue-router4中,需要从vue-router内引入需要的插件。

  1. <script> 
  2. import {  onBeforeRouteLeave } from "vue-router" 
  3. export default { 
  4.  setup(){ 
  5.  onnBeforeRouteLeave((to,from)=>{ 
  6.   const answer = window.confirm('是否确认离开'
  7.   if(answer){ 
  8.    console.log('不离开'); 
  9.    return false 
  10.   } 
  11.   }) 
  12.  } 
  13. </script> 

四、vue-router4 发生破坏性变化

4.1、实例创建方式

  1. //以前创建方式 
  2. const router = new VueRouter({ 
  3.   
  4. }) 
  5. new Vue({ 
  6.  router, 
  7.  render:h=>h(App) 
  8. }).$mount("#app"
  9.  
  10. //vue-router4创建方式 
  11. import { createRouter } from "vue-router" 
  12. const router = createRouter({ 
  13.  
  14. }) 
  15. createApp(App).use(router).mount("#app"

4.2、模式声明方式改变

  1. //之前 
  2. const router = new VueRouter({ 
  3.  mode:"hash" 
  4. }) 
  5.  
  6. //新的 
  7. import { createRouter, createWebHashHistory } from "vue-router" 
  8. const router = createRouter({ 
  9.  history:createWebHashHistory() 
  10. }) 

 之前的mode替换成了 history ,它的选项变化分别为:

  • history -> createWebHistory
  • hash -> createWebHashHistory
  • abstract -> createMemoryHistory

4.3、base属性被合并

base 选项被移至 createWebHistory 中。

  1. //之前 
  2. const router = new VueRouter({ 
  3.  base:"/" 
  4. }) 
  5.  
  6. //新的 
  7. import { createRouter, createWebHashHistory } from "vue-router" 
  8. const router = createRouter({ 
  9.  history:createWebHashHistory('/'
  10. }) 

4.4、通配符 * 被取消

  1. //之前 
  2.  path:'*'
  3.  component:()=>import("../components/NotFound.vue"
  4.  
  5. //vue-router 4 
  6.  path:'/:pathMatch(.*)*'
  7.  component:()=>import("../components/NotFound.vue"
  8. //是一个正则表达式 

4.5、isReady() 替代 onReady

  1. //之前 
  2. router.onReady(onSuccess,onError)//成功和失败回调 
  3.  
  4. //vue-router 4 
  5. router.isReady().then(()=>{ 
  6.  //成功 
  7. }).catch(err=>{ 
  8.  //失败 
  9. }) 

4.6、scrollBehavior 变化

  1. const router = createRouter({ 
  2.  scrollBehavior(tofrom, savedPosition) { 
  3.   // 始终滚动到顶部 
  4.   return { top: 0, left:0 } 
  5.  }, 
  6. }) 
  7. //之前使用的{ x:0, y:0 } 替换成了 { top: 0, left:0 } 

4.7、keep-alive 和 transition 必须用在 router-view 内部

  1. //之前 
  2. <keep-alive> 
  3.  <router-view /> 
  4. </keep-alive> 
  5.  
  6. //vue-router 4 
  7. <router-view v-slot="{component}"
  8.  <keep-alive> 
  9.   <component :is="component" /> 
  10.  </keep-alive> 
  11. </router-view

4.8、router-link 移除了一部分属性

移除 append 属性

  1. //之前 
  2. <router-link to="child" append >跳转<router-link> 
  3.  
  4. //vue-router 4 
  5. <router-link :to="append( $route.path , 'child' )" append >跳转<router-link> 

tag 被移除

  1. //之前 
  2. <router-link to="/" tag="span">跳转</router-link> 
  3.  
  4. //vue-router 4 
  5. <router-link to="/" custom> 
  6.  <span>跳转</span>   
  7. </router-link> 

event 被移除

4.9、route 的 parent 属性被移除

4.10、pathToRegexpOptions选项被移除,其他内容替换

4.11、routes选项是必填项

4.12、跳转不存在的命名路由报错

之前跳转到不存在的路由,页面是空的,会重定向根路径,这是不合理的,所以vue3报错了。

4.13、缺少必填参数会抛出异常

4.14、命名子路由如果 path 为空的时候,不再追加 /

之前生成的 url 会自动追加一个 / ,如:"/dash/"。副作用:给设置了 redirect 选项的子路由带来副作用。

 

责任编辑:姜华 来源: 今日头条
相关推荐

2021-12-14 19:40:07

Node路由Vue

2022-02-02 21:29:39

路由模式Vue-Router

2022-02-16 08:45:55

Vue-Router权限管理系统权限验证

2019-07-11 10:45:34

MQ中间件 API

2022-06-24 07:15:53

Vuehistory模式

2016-06-01 15:42:58

Hadoop数据管理分布式

2020-04-17 14:25:22

Kubernetes应用程序软件开发

2014-04-17 16:42:03

DevOps

2022-07-26 00:00:22

HTAP系统数据库

2021-01-15 07:44:21

SQL注入攻击黑客

2022-08-15 10:42:50

千兆网络千兆光纤

2021-04-23 07:27:31

内存分配CPU

2021-11-09 09:48:13

Logging python模块

2014-11-28 10:31:07

Hybrid APP

2017-11-02 16:03:12

2012-10-24 10:16:17

IT工程师云计算网络管理

2021-10-15 10:27:42

变量命名

2020-02-27 10:49:26

HTTPS网络协议TCP

2019-09-16 08:40:42

2019-05-13 14:17:06

抓包Web安全漏洞
点赞
收藏

51CTO技术栈公众号