轻松玩转 Vue3 路由：在纯 JS/TS 文件中实现路由跳转与参数获取

使用 Vue3 纯 JS/TS 文件实现路由跳转与参数获取

简介

Vue3 的路由功能强大而灵活，但有时我们可能需要在纯 JS/TS 文件中实现路由跳转与参数获取。本文将详细介绍如何实现这一目标，包括创建路由实例、实现路由跳转、路由传参、获取路由参数以及在外部 JS 文件中使用路由实例。

创建路由实例

首先，我们需要安装 vue-router：

npm install vue-router

然后，在纯 JS/TS 文件中，我们可以通过 createRouter 方法创建路由实例：

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

路由跳转

在纯 JS/TS 文件中，我们可以通过 router.push 方法实现路由跳转：

router.push('/about')

路由传参

在纯 JS/TS 文件中，我们可以通过 router.push 方法的第二个参数实现路由传参：

router.push({
  path: '/about',
  query: {
    id: 1
  }
})

获取路由参数

在纯 JS/TS 文件中，我们可以通过 useRoute 方法获取路由参数：

import { useRoute } from 'vue-router'

const route = useRoute()

const id = route.query.id

在外部 JS 文件里拿到路由实例

在外部 JS 文件里，我们可以通过 Vue.use 方法拿到路由实例：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

const app = createApp({})

app.use(router)

然后，我们就可以在外部 JS 文件里使用路由实例了：

router.push('/about')

代码示例

// main.js
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

const app = createApp({})

app.use(router)

// other.js
import { router } from './main.js'

router.push('/about')

常见问题解答

• 如何在纯 JS/TS 文件中创建路由实例？

  const router = createRouter({
    history: createWebHistory(),
    routes
  })
  

• 如何在纯 JS/TS 文件中实现路由跳转？

  router.push('/about')
  

• 如何在纯 JS/TS 文件中实现路由传参？

  router.push({
    path: '/about',
    query: {
      id: 1
    }
  })
  

• 如何在纯 JS/TS 文件中获取路由参数？

  const route = useRoute()
  
  const id = route.query.id
  

• 如何在外部 JS 文件里拿到路由实例？

  import { router } from './main.js'
  
  router.push('/about')
  

结论

通过遵循本文中的步骤，您可以在 Vue3 纯 JS/TS 文件中轻松实现路由跳转和参数获取，从而增强您的应用程序的可扩展性和交互性。