VueRouter路由传参

1. 前言

本小节我们介绍 VueRouter 路由组件传参。包括 params 传参、query 传参的两种方式。路由传参的知识点非常重要,在日常开发中,我们经常会通过路由传递各种参数,同学们在学完本节后可以将小节中的案例自己动手实现一遍,这样才可以加深印象并熟练掌握。

2. params 传参

使用 params 传参数我们可以分为两个步骤:

  1. 定义路由以及路由接收的参数。
  2. 路由跳转时传入对应参数。
    首先,我们先了解如何定义路由接收的参数:
const routes = [
  { path: '/detail/:name', name: 'detail', component: Detail },
]

使用 <router-link></router-link> 的方式跳转路由:

 <!-- router-link 跳转 -->
<router-link :to="{name: 'detail', params: {name: 'React 基础学习'}}">2. React 基础学习</router-link>

具体示例:

实例演示
预览 复制