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

文章目录

    • 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。

你可能感兴趣的:(vue.js,javascript,前端)