vue2和vue3中的路由使用及传参方式

Vue 2 和 Vue 3 中的路由系统有很多相似之处，但也存在一些重要的区别。下面将分别介绍 Vue 2 和 Vue 3 中的路由使用方式，并了解下它们之间的不同之处。

vue2中使用路由

在 Vue 2 中，通常使用 Vue Router 来处理路由。下面是一个简单的 Vue Router 示例：
1、创建路由文件

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

export default router;

2、在 main.js 中引入路由：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  render: h => h(App),
  router
}).$mount('#app');

3、在组件中使用：

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

    <router-view></router-view>
  </div>
</template>

Vue3 中使用路由

在 Vue 3 中，Vue Router 仍然是常用的路由解决方案。但是，Vue 3 引入了 Composition API，使得路由的使用方式有了一些变化。
1、创建路由文件

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

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

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

export default router;

2、在 main.js 中引入路由

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

3、在组件中使用

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

需要注意的是：在 Vue 2 中，Vue Router 的版本是 3.x，而在 Vue 3 中，我们需要使用 Vue Router 4.x 版本。需要注意版本兼容性。在 Vue 3 中，使用 createRouter 和 createWebHistory 来创建路由实例，而不再使用 Vue.use(VueRouter)。

在 Vue 3 中，路由导航的 API 和 Vue 2 有些不同：
1、使用 useRouter：
在组件中使用 useRouter 函数获取路由对象：

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    // use router...
  },
};

Vue 3 中路由守卫的使用方式基本与 Vue 2 保持一致，包括全局前置守卫 beforeEach、全局后置守卫 afterEach 等。

路由传参方式

在Vue中，路由传参和跳转有多种方式，具体选择哪种方式取决于你的需求和场景。以下是一些常见的方式：
1、通过params传递参数：

• 举例：

<!-- 跳转时传递参数 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

• 接收参数：

// 在目标组件中通过 $route.params 获取参数
const userId = this.$route.params.userId;

• 使用场景： 适用于参数较少，且不涉及敏感信息的情况。

2、通过query传递参数：

• 举例：

<!-- 跳转时传递参数 -->
<router-link :to="{ name: 'user', query: { userId: 123 }}">User</router-link>

• 接收参数：

// 在目标组件中通过 $route.query 获取参数
const userId = this.$route.query.userId;

• 使用场景： 适用于参数较多，或者参数需要保留在 URL 中的情况。

3、通过props传递参数：

• 举例：

<!-- 在路由配置中设置 props -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 在目标组件中通过 props 接收参数 -->
<script>
export default {
  props: ['userId'],
  // ...
}
</script>

• 使用场景： 适用于需要将参数直接传递给组件实例的情况。

4、通过name传递参数：

• 举例：

<!-- 跳转时传递参数 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

• 接收参数：

// 在目标组件中通过 $route.params 获取参数
const userId = this.$route.params.userId;

• 使用场景： 适用于需要通过路由的名称来传递参数的情况。

5、编程式导航：
使用 router.push、router.replace 和 router.go 进行编程式导航：

• 举例：

this.$router.push({ name: 'user', params: { userId: 123 }});
// Push to a new route
this.$router.push('/about');

// Replace the current route
this.$router.replace('/about');

// Go back or forward in the history
this.$router.go(-1);

• 使用场景： 适用于在 JavaScript 中进行导航的情况，例如在事件处理函数中。

6、命名路由：

• 举例：

// 在路由配置中设置 name
const routes = [
  { path: '/user/:userId', component: User, name: 'user' }
];

• 使用场景： 适用于在不同地方使用相同的路由配置。

最常用的方式取决于具体需求，一般来说，params和query是比较常用的传参方式。如果需要在组件内部直接使用参数，可以考虑使用props。