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
    matched:??
}

2、this.$router的方法:

1.字符串 this.$router.push(‘/home‘)
2.对象  this.$router.push({path:‘home‘})
3.命名的路由 this.$router.push({name:‘home‘,params:{id:1}})
4.带查询参数 this.$router.push({path:‘home‘,query:{id:1}})
3、路由跳转方式:
1.声明式:<router-link :to="">
2.编程式:this.$router.push();
4、path:‘name‘ 和 path:‘/name‘ 区别:

假如当前路径是home

this.$router.push(‘/name‘) =>  /home/name
this.$router.push(‘name‘)  =>  /name    

原文地址:https://www.cnblogs.com/annie211/p/12665981.html

时间: 2024-08-30 07:39:06

router和route的区别的相关文章

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.pa

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&amp;$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

[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

[Angular2 Router] Resolving route data in Angular 2

From Article: RESOLVING ROUTE DATA IN ANGULAR 2 Github If you know Anuglar UI router, you must know resolve function in ui router, which you can load data before template and controller get inited. In Angular2 router, you can also use resovler. The r