Vue3 - 在纯 js/ts 文件中实现路由跳转与传递路由参数功能以及获取路由参数等信息

在Vue 3中，可以使用Vue Router库来实现路由跳转和参数传递。首先，确保已经安装了Vue Router：

npm install vue-router@4

接下来，在纯JavaScript或TypeScript文件中，可以这样使用Vue Router进行路由跳转和参数传递：

// router.js
import { createRouter, createWebHistory } from 'vue-router';
 
// 定义路由
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  // 使用动态路由参数
  { path: '/user/:id', component: User }
];
 
// 创建router实例
const router = createRouter({
  history: createWebHistory(),
  routes
});
 
export default router;

// main.js 或其他入口文件
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
 
const app = createApp(App);
app.use(router);
app.mount('#app');

在Vue组件中，可以这样进行路由跳转：

// 在Vue组件中
this.$router.push('/user/123'); // 跳转到/user/123路径，并传递参数123

要获取路由参数，可以在组件内部这样做：

// 在Vue组件中
const userId = this.$route.params.id; // 获取路由参数id

如果是在非Vue组件中，可以这样获取当前路由参数：

import router from './router';
 
// 获取当前路由
const currentRoute = router.currentRoute.value;
 
// 获取参数
const userId = currentRoute.params.id;

请注意，这些代码示例假定您已经有了一个Vue 3项目的基础结构，并且已经设置了Vue Router。在实际应用中，您可能需要根据具体情况调整路由定义和导入逻辑。