目录

一、两种路由跳转方式

1、声明式导航

 2、编程式导航

简单理解： 

 二、params传参和query传参

1、params方式传参

 （1）params传参（不在URL中显示参数）

（2）params传参（显示参数）

2、query方式传参

---

一、两种路由跳转方式

1、声明式导航

这是基于 HTML 标签的导航方式。在 Vue Router 中，你可以使用 <router-link> 组件来声明式地指定一个链接，点击后会导航到指定的路由

例如：<router-link to="/about">声明式导航</router-link>

 2、编程式导航

这是通过编程方式进行导航的方式。你可以使用 router.push、router.replace 和 router.go 这三个方法来进行导航。这种方式更灵活，适合于需要动态构建路由的情况
例如： this.$router.push({ name: 'user', params: { userId: 123 }})

简单理解： 

（1）声明式导航：vue封装后的标签组件直接使用无需自定义点击事件实现跳转传参

（2）编程式导航：自定义@click点击事件实现跳转传参

 

 二、params传参和query传参

1、params方式传参

 （1）params传参（不在URL中显示参数）

• 在父路由跳转到子路由时，也可以通过params传递参数。
• 参数不会显示在URL中，不能直接在URL中看到传递的参数。
• 使用$router.push方法进行跳转，并在params对象中传递参数。
• 在子路由中通过$route.params来获取传递的参数。

声明式 router-link

（对象 ）写法：
               name:'组件名称; params:{参数名称:参数}  
<router-link :to="{name:'about',params:{name:'路由传参'}}">跳转传递参数</router-link>

 编程式 this.$push({ })

this.$router.push({
    name:'about', //组件名
    params: {id:'1'}  //传递的参数 {key:value,key:value}
})

 图解：不在地址栏中显示传递的参数

 获取传递的参数

tips：通过this.$route获取，this.$route以对象的形式返回路由中的数据，其中包括传递的参数。

console.log('接收到的params参数',this.$route.params)

 整个路由对象this.$route：

获取传递的params参数，打印结果：

缺点：不能直接在URL中看到传递的参数，刷新页面会造成传递的参数丢失。

 

 

（2）params传参（显示参数）

• 在父路由跳转到子路由时，可以通过params传递参数。
• 参数会显示在URL中，可以直接在URL中看到传递的参数。
• 在子路由中通过$route.params来获取传递的参数。
• to是跳转的地址，params是传递的参数

注意： 这种字符串写法需要提前配置路由才能实现 

{
    path: "/about/:id",
    name: "about",
    component: () => import("../views/about/about.vue"),
  },

 （写法1）：声明式 router-link

动态传参
<router-link :to="`/about/${id}`"></router-link>
传固定值
<router-link :to="`/about/${id}`"></router-link>

 （写法2）：编程式 this.$push({ })

this.$router.push({
    path:`/about/${1}`, //模板字符串，动态传参写法
  //path:'/about/1'    //直接传固定值
})

 获取传递的参数同上

  可以在页面的URL地址中看到传递的参数，且刷新不会丢失

 

2、query方式传参

• 在父路由跳转到子路由时，可以通过query传递参数。
• 参数会显示在URL中，可以直接在URL中看到传递的参数。
• 使用$router.push方法进行跳转，并在query对象中传递参数。
• 在子路由中通过$route.query来获取传递的参数。

声明式

<router-link :to="{path:'/about',query:{id:'query传参'}}">query传参</router-link>

 编程式

//name 和 path 都能用。用 path 的时候，提供的 path 值必须是相对于根路径的相对路径，而不是相对于父路由的相对路径，否则无法成功访问。
this.$router.push({
     path:'/about',
     // name:'about',
     query:{
     id:1
  }
})

获取query参数

this.$route.query

 特性：可以在页面的URL地址中看到传递的参数，刷新页面不会造成传递参数的丢失