router 和 route 的区别
router
- router一般具有功能性,例如:
1> r o u t e r . g o ( n u m b e r ) , 作 用 : 页 面 路 由 跳 转 ; 前 进 或 者 后 退 t h i s . router.go(number), 作用: 页面路由跳转; 前进或者后退this. router.go(number),作用:页面路由跳转;前进或者后退this.router.go(-1) // 后退
2> $router.push,
作用: 跳转到指定的url路径;
- 字符串 this.$router.push(‘home’)
- 对象 this.$router.push({path: ‘home’})
- 命名的路由 this. r o u t e r . p u s h ( n a m e : ′ u s e r ′ , p a r a m s : u s e r I d : 123 ) 4. 带 查 询 参 数 变 成 / r e g i s t e r ? p l a n = 123 t h i s . router.push({name: 'user', params: {userId: 123}}) 4. 带查询参数 变成/register?plan=123this. router.push(name:′user′,params:userId:123)4.带查询参数变成/register?plan=123this.router.push({path: ‘register’, query: {plan:
‘123’}})
push方法其实和是等同的;
注意: push方法的跳转会向 history 栈添加一个新的记录**, 当我们点击浏览器的返回按钮时可以看到之前的页面;**3>$router.replace(path)
作用: 跳转到指定的url路径;
push 方法会向history栈添加一个新的记录, 而replace方法是替换当前的页面, 不会向 history 栈添加一个新的记录;
route
route一般用于获取信息,例如
获取
-路由路径($route.path)
-路由参数($route.params)
-路由的查询参数($route.query)
-路由的hash值($route.hash), 完成解析后的hash值(不带#但包含查询参数和hash的完成路径, $route.fullhash)
-数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象($route.matched)
-当前路径名字($route.name)
-路由元信息($route.meta),meta就代表元数据
需要获取某个路由信息的时候用 route , 需要使用路由方法的时候用 router
routes
routes指创建vue-router路由实例的配置项, 用来配置多个route路由;
$router:是路由操作对象, 只写对象;
r
o
u
t
e
:
是
路
由
信
息
对
象
,
只
读
对
象
;
/
/
操
作
路
由
跳
转
t
h
i
s
.
route: 是路由信息对象, 只读对象; // 操作 路由跳转 this.
route:是路由信息对象,只读对象;//操作路由跳转this.router.push({
name: ‘hello’,
age: ‘11’
})
//读取 路由参数接收
this.name = this.
r
o
u
t
e
.
p
a
r
a
m
s
.
n
a
m
e
t
h
i
s
.
a
g
e
=
t
h
i
s
.
route.params.name this.age = this.
route.params.namethis.age=this.route.params.age