Vue3路由跳转

Vue 3使用Vue Router来管理应用程序的路由。Vue Router是Vue.js官方提供的路由管理插件，用于实现单页面应用（SPA）中的路由导航。

以下是如何在Vue 3中使用Vue Router进行路由跳转的基本步骤：

一、router-link（声明式）

•  params传参的参数不会显示在跳转的URL中，query传参的参数会显示在URL中。因为params所传递的参数不显示在的URL中，所以在路由跳转时推荐params方式进行传参。

• 获取params和query传递的参数

  import { useRoute } from 'vue-router';
  const route = useRoute();
  console.log(route.params）
  console.log(route.query）

  二、router（编程式）

• 使用方法

import { useRouter } from 'vue-router';
const router = useRouter();
router.push({ path: '/home',query: { id: '123', value: '跳转到详情'} })
router.push({name: '/home', params: { id: '123', value: '跳转到详情'} })
router.push({name: '/home',query: { id: '123', value: '跳转到详情'} })

• 获取参数

import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.params）
console.log(route.query）

• 其他常用的vue-router方法

• push(location: RawLocation, onComplete?: Function, onAbort?: ErrorHandler)： 导航到一个新的路由，类似于通过点击 进行跳转。可以使用字符串路径或一个描述地址的对象作为参数。

• replace(location: RawLocation, onComplete?: Function, onAbort?: ErrorHandler)： 类似于 push 方法，但是不会在浏览器的历史记录中留下记录，而是替换当前的历史记录项。

• go(n: number)： 在浏览器历史记录中前进或后退 n 步，类似于浏览器的前进和后退按钮。

• back()： 后退一页，等同于 go(-1)。

• forward()： 前进一页，等同于 go(1)。

• getCurrentLocation()： 获取当前路由的地址信息对象。

• beforeEach(guard: NavigationGuard)： 注册一个全局前置守卫，用于在导航开始前执行逻辑，可以用来进行路由权限控制等操作。

• beforeResolve(guard: NavigationGuard)： 注册一个全局守卫，会在导航被确认前执行，但是在 beforeEach 守卫之后调用。

• afterEach(hook: (to: Route, from: Route) => any)： 注册一个全局后置钩子，在导航完成之后执行，无论成功还是失败。

• resolve(location: RawLocation, current?: Route, append?: boolean)： 将传入的位置信息解析成一个完整的位置对象。

• addRoute(parentName: string, route: RouteRecordRaw)： 动态添加一个新的路由记录。

• removeRoute(name: string)： 动态移除一个已注册的路由记录。

• hasRoute(name: string)： 检查是否已经注册了某个路由记录。

• getRoutes()： 获取当前已注册的路由配置。

三、router.resolve()打开新窗口跳转

import { useRouter } from 'vue-router';
const router = useRouter();
const goDeatil=()=> {
    let temp = router.resolve({
      path: '/detail',
    });
    window.open(temp.href, '_blank');
  }
const goDeatil=()=> {
    let temp = router.resolve({
     name: 'detail',
    });
    window.open(temp.href, '_blank');
  }