【VUE声明式导航跳转如何传参】router-link查询参数传参&动态路由传参

VUE声明式导航跳转如何传参

前言

提示：这里的跳转如何传参？ 指 一个页面向另一个地址页面跳转时，如何传值？

比如下面的使用场景，热搜榜，是很常见的使用场景之一。

以上场景非常常见，如果还是不明白，可以这样理解：
（1）点击【首页】中的“细水长流者的博客”；
（2）对【搜索页】进行传值（因为搜索页需要知道点击的是哪个链接）；
（3）【搜索页】接收参数值，进行前端渲染。

简单理解：首页向搜索页传值，搜索页接收首页传过来的参数值！！！。

接下来，本文主要介绍router-link的两种跳转传参方式——查询参数传参和动态路由传参。

提示：router-link就是声明式导航，一个意思！！！

一、查询参数传参

语法

① 语法格式如下（to是router-link标签中的属性，类似a标签的href属性，本质上就是a标签）：

• to="/path?参数名=值"

②对应页面组件接收传递过来的值：

• $route.query.参数名

实现步骤

1.实现【首页】和【搜索页】的基础点击功能

注意：此时并不涉及传参，只是实现首页和搜索页的正常点击功能

上述代码可在下面的图中显示出来，设置了【首页】的目标地址为/home，所以点击【首页】之后，地址栏会变成http://localhost:8080/#/home（原本是http://localhost:8080/#，即配置了路由之后的原始地址）；点击【搜索】是一个道理。

2.实现【首页】向【搜索页】跳转时的传参功能

(1) 【首页】中注意to属性的写法，在第一步骤的基础上加上?key=细水长流者的博客；
(2) 【搜索】中注意取key值的语法，使用{ {$route.query.key}}

运行项目，可看到下面的运行效果：

其他热门搜索链接也是如此，效果如下：

传值结束！！！

JS中如何获取传值

这个步骤只是为了后续JS取值需要，因为在html结构中是不需要写this的，但是JS中需要加上this.。

代码如下：

F12查看网页源代码，查看控制台的输出，可以看出，能够成功拿到参数值。

二、动态路由传参

语法

实现步骤

1.实现首页和搜索页的基础功能

该步骤如果会了可忽略，与上面查询参数传参方法一毛一样！！！

2.配置动态路由

注意这个words，后续接收传值是需要的

3.【首页】配置导航链接

为传参做准备，参数就是标记部分

4.【搜索页】接收传值

最终实现的效果如下所示：

JS中如何获取传值

同查询参数传参章节

总结

需求：首页向搜索页传值，搜索页接收首页传过来的参数值！！！。

做法：查询参数传参&动态路由传参。

动态路由传参代码分享

接下来分享【动态路由传参】代码：（查询参数传参被我注释，解开即可）

项目结构如下所示：

main.js代码：

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

Vue.config.productionTip = false

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

router文件夹下的index.js代码：

// 路由的步骤
// 1.下载v3.6.5  
// 2.引入
// 3.安装注册Vue.use
// 4.创建路由对象
// 5.注入到new Vue中，建立关联
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/home.vue'
import Search from '@/views/search.vue'
Vue.use(VueRouter)

const router =new VueRouter({
   
   
  routes:[
    {
   
   path:'/home',component:Home},
    // {path:'/search',component:Search},
    //第一步：配置动态录路由
    {
   
   path:'/search/:words',component:Search},
  ]
})

export default router

app.vue代码：

<template>
  <div id="app">
    <div class="footer_wrap">
      <router-link to