vue2.0 $router和$route的区别

在vue2.0里页面参数是 this.$route.query或者 this.$route.params 接收router-link传的参数。

在路由跳转的时候除了用router-link标签以外需要在script标签在事件里面跳转，所以有个方法就是在script标签里面写this.$router.push(‘要跳转的路径名‘)，

在写的时候发现这两个为什么不同，在控制台打出this的时候，发现$route和$router同时存在

$route为当前router跳转对象里面可以获取name、path、query、params等

$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法

返回上一个history也是使用$router.go方法

原文地址：https://www.cnblogs.com/ycg-myblog/p/10355403.html

时间： 2024-08-27 09:44:48

vue2.0 $router和$route的区别的相关文章

router和route的区别

1.区别: this.$router是全局路由器对象 this.$route是当前激活的路由对象,包含了当前的路由信息. console.log(this.$route); { fullPath:'/home' //包含查询参数和 hash 的完整路径 path:'', //当前路由路径,绝对路径 name:'Home', meta:{auth:true}, //是否需要登录 hash:'', params:{}, query:{id:1} //表示 URL 查询参数,相当于/home?id=1

vue中$router和$route的区别

$router是VueRouter的实例,在script标签中想要导航到不同的URL,使用$router.push方法. 返回上一个历史history用$router.to(-1) $route为当前router跳转对象.里面可以获取当前路由的name,path,query,parmas等. 嗯,就酱~~ 参考:https://www.cnblogs.com/yangguoe/p/9974793.html 原文地址:https://www.cnblogs.com/jin-zhe/p/105064

彻底搞懂$router 和 $route

之前,一直对$router和$route之间的区别比较模糊,后来结合网上的博客和官方给出的解释了解了他们之间的区别. 1.router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性. 举例: 1.$router.push({path:'home'});本质是向history栈中添加一个路由并且添加一个history记录,在我们看来是 切换路

阿里矢量图的应用--flex布局--vue中$router和$route的方法

1.阿里矢量图字体图标的用法 2.flex布局 display:flex:设置父容器为伸缩盒子,会使每一个子元素自动变成伸缩项 接着设置子元素主轴方向上的排列方式 justify-content: flex-start让子元素从父容器的起始位置开始排列: flex-end:让子元素从父容器的结束位置开始排列: ? center:让子元素从父容器的中间位置开始排列: ? space-between:左右对齐父容器的开始和结束,中间平均分页,产生相同的间距: ? space-around:将多余的空

$router&$route的区别

$route为当前router跳转对象 里面可以获取name.path.query.params等 $router为VueRouter实例,想要导航到不同URL,则使用$router.push方法 返回上一个history也是使用$router.go方法 总结:感觉$route是$router的子集(纯属个人理解) 原文地址:https://www.cnblogs.com/fewhj/p/9264483.html

[Angular2 Router] Optional Route Query Parameters - The queryParams Directive and the Query Parameters Observable

In this tutorial we are going to learn how to use the Angular 2 router to pass optional query parameters from one route into another route. There are couple of ways of doing this from the source route perspective: we use the queryParams property in t

从零开始，零基础，一点一点探索vue-router(vue2.0)

首先我们用vue-cli搭建一个vue开发的脚手架,删除它的原来的代码,开始写自己的代码,实现最简单的router功能: 一,开始 新建几个自己需要的页面,随便写点东西 <template> <div id = "movie"> I'm moive! </div> </template> <script> export default {}; </script> <style> </style&g

[Angular2 Router] CanActivate Route Guard - An Example of An Asynchronous Route Guard

In this tutorial we are going to learn how we can to configure an can activate route guard in the Angular 2 router. We are going to implement the concrete example where a user can only enter a certain route if its authorized to do so. We are also goi

[Angular2 Router] CanDeactivate Route Guard - How To Confirm If The User Wants To Exit A Route

In this tutorial we are going to learn how we can to configure an exit guard in the Angular 2 Router. We are going to learn how to use a CanDeactivate route guard to ask the user if he really wants to exist the screen, giving the user to for example