vue router $router与$route区别用法

this.$route.params.id // 获取参数

this.$router.push({path:'/AddShop',query:{id:val.ID}})


router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,
这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。

举例:history对象

$router.push({path:'home'});本质是向history栈中添加一个路由,在我们看来是 切换路由,
但本质是在添加一个history记录

方法:

$router.replace({path:'home'});//替换路由,没有历史记录

query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会在地址栏中显示。

$router : 是路由操作对象,只写对象
$route : 路由信息对象,只读对象

path 和 Name路由跳转方式,都可以用query传参

path路由跳转方式,params传参会被忽略,只能用name命名的方式跳转

注意:params传参如果路由上面不写参数,也是可以传过去的,但不会在url上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失,要怎么解决?

解决:

  1. 传参字符串name小的时候,可以在路由后面加参数名/router1/:name
  2. name大的时候用sessionStorage;(欢迎补充)

注意:如果路由为动态路由{path: '/hello/:id',name:'hello'}
此种方式传参在mode: "hash",模式下可以,history模式下应用 /hello/user 这种导航报错,不知道为啥,有知道解决方案的请告知下。
路由跳转执行this.$router.push({name: 'hello',params: obj});obj里面只要有id属性,就会自动带到URL里面

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容