目录
一、两种路由跳转方式
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地址中看到传递的参数,刷新页面不会造成传递参数的丢失