Vue3路由跳转

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

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

一、router-link（声明式）

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

<router-link :to="{ name: 'detail', params: { id: '123', value: '跳转到详情'} }"></router-link>
<router-link :to="{ name: 'detail', query: { id: '123', value: '跳转到详情' } }"></router-link>
</router-link>
<router-link :to="{ path: '/detail', query: {id: '123', value: '跳转到详情' } }"></router-link>

获取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)：导航到一个新的路由，类似于通过点击 <router-link> 进行跳转。可以使用字符串路径或一个描述地址的对象作为参数。
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');
  }

一、router-link（声明式）

二、router（编程式）

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

猜你喜欢