vue-router@4.x使用记录_router4 router.push state-优快云博客

本文链接：https://blog.youkuaiyun.com/wang_liuyong/article/details/124810823

本文详细解读了Vue Router的三种模式：hash模式如何通过监听hashchange实现局部刷新，history模式的美观性和popstate事件的使用，以及abstract模式在SSR场景的应用。涵盖了路径跳转、动态路由参数、命名视图和高级重定向技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

vue-router

vue-router

模式以及实现原理

hash模式

地址栏会带#，通过监听hashchange 实现局部刷新，可由浏览器前进后退控制

history模式

地址栏不带#，相对hash比较美观，通过监听popstate 实现局部刷新，主动跳转通过pushState实现。浏览器前进后退控制会失效。

abstract模式

需要ssr时，使用该模式

跳转方式详解

1. 通过path或者name进行跳转

 <router-link :to="{name:'demo'}"></router-link> or
 <router-link :to="{path:'/demo'}"></router-link> 

// setup url明文传参数
router.push({
 // name:'demo'
 path:'/demo',
 query:{}
})

// 隐式传参（只能通过name）
router.push({
  name:'demo',
  params:{
    name:'wly'
  }
});

参数的获取

 route.query
 route.params

2. 动态路由传参

路由配置

{
  path: "/index/:id",
 name: "Dashboard",
  component: () => import('@/views/HomeView.vue')
},

跳转方式

 router.push({
    name: "Dashboard",
    params: {
      id: "100",
    },
  });

参数获取

route.params.id

vue-router@4.x使用记录