编程式导航介绍:
编程式导航是和 <router-link>相对应的,<router-link>可以类比为传统的超链接<a>,点击即可跳转,是静态的 但有时候需要动态跳转 如:用户想访问某个页面 但是该页面必须登录以后才能访问 若该用户在未登录的情况修改访问该页面,则会自动跳转到登录页面,优化方案就是使用编程式导航
一.query传参
传递
this.$router.push({
path: '路径地址',
query:{
参数名: 值
}
})
接收
$route.query.参数名
1. query跳转 简写
this.$router.push(/路径名 )
二.params传参
传递
this.$router.push({
name: '组件名',
params:{
参数名 : 值
}
})
配置
{
path:'/路径/: 参数名'
component: '组件名 '
}
// 传递多个参数配置
{
path:'/路径/: 参数名/: 参数名/'
component: '组件名 '
}
接收
$route.params.参数名
注意: 在Vue实列内部 可以通过 $router 访问路由实列 因为可以调用 this.$router.push
说明:
1.router.push 方法 会向 history 栈中添加一个新的记录 所以当用户点击浏览器后退按钮时则回到之前url
2.当点击<router-link>时 这个方法会内部调用 所以 <router-link :to=".. "> 等同于router.push(...)
query传参 params传参之间区别
query传参: 是在内存中传参,刷新会丢失
params传参: 是在地址栏传参 刷新还在
query传参 params传参说明
1.query传参配置的是path,而params传参配置的是name 在params中配置path无效
2.query在路由配置不需要设置参数 而params必须设置
3.query传参的参数会显示在地址栏中
4.params传参刷新会无效 ,但是query会保存传递过来的值,刷新不变
三. route和router区别原理
$route 是路由对象,用于获取路由参数
$router 是路由导航对象,用于做路由跳转
this.$route: 指的是当前 激活 的路由信息对象 又称 路由记录 , 该对象是只读的 内部属性不可改变 当路由发生重定向 或 路由参数改变时,该对象会被重新计算 一般会用watch( ) 监听
this.$router: 指的是 router实列 也就是 new VueRouter( ) 的执行结果 使用效果与router相同 这种写法是因为Vue并不想在每个独立需要封装路由的组件中导入路由 因此在全局创建了该对象