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');
  }

Logo

前往低代码交流专区

更多推荐