跳转传参及参数获取

跳转传参

我们可以通过两种方式，在跳转的时候把所需要的参数传到其他页面中

• 查询参数传参
• 动态路由传参

查询参数传参

如何传参？

注：

① 参数的值不用加""

② key与=与参数名之间不要加空格！！

   <router-link to="/path?参数名=值"></router-link>
    //有多个参数使用&链接

如何获得参数

1. Vue2

$route.query.参数名

在created()之中获取：

this.$route.query.参数名

2. Vue3
使用VueRouter提供的useRoute方法来获得route实例

// 导入方法
import { useRoute } from 'vue-router';
// 获得route实例
const route = useRoute()

参数获取：route.query.参数名

动态路由传参

传参方式

• 配置动态路由
  动态路由后面的参数可以随便起名，但要有语义
  path: '/path/:参数名'

      const router = new VueRouter({
        routes: [
          ...,
          { 
            path: '/search/:words', 
            component: Search 
          }
        ]
      })

• 配置导航链接
  to="/path/参数值"

获得参数

1. Vue2
$route.params.参数名

params后面的参数名要和动态路由配置的参数保持一致

在created()之中获取：

this.$route.params.参数名

2. Vue3
使用VueRouter提供的useRoute方法来获得route实例

// 导入方法
import { useRoute } from 'vue-router';
// 获得route实例
const route = useRoute()

参数获取：route.params.参数名

总结

查询参数传参 VS 动态路由传参

1. 查询参数传参 (比较适合传多个参数)
   • 跳转：to=“/path?参数名=值&参数名2=值”
   • 获取：$route.query.参数名 / route.query.参数名
2. 动态路由传参 (优雅简洁，传单个参数比较方便)
   • 配置动态路由：path: “/path/:参数名”
   • 跳转：to=“/path/参数值”
   • 获取：$route.params.参数名 / route.params.参数名

注意：动态路由也可以传多个参数，但一般只传一个

声明式导航跳转时, 有几种方式传值给路由页面？

• 查询参数传参（多个参数）
• 动态路由传参（一个参数，优雅简洁）

使用useRoute()创建route实例相当于$route