Vue09/Vue 编程式导航 query传参 params传参 之间使用区别、route和router区别原理

 编程式导航介绍：

     编程式导航是和 <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并不想在每个独立需要封装路由的组件中导入路由 因此在全局创建了该对象