Vue中router 和 route 、routes 的区别

router 和 route 的区别

router

1. router一般具有功能性，例如:

1>$router.go(number),作用:页面路由跳转;前进或者后退this.$router.go(-1) // 后退

2> $router.push,

作用: 跳转到指定的url路径;

1. 字符串 this.$router.push(‘home’)
2. 对象 this.$router.push({path: ‘home’})
3. 命名的路由 this.$router.push(name{:}^{\prime }use{r}^{\prime },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：是路由操作对象, 只写对象;
$route:是路由信息对象,只读对象;//操作路由跳转this.$router.push({
name: ‘hello’,
age: ‘11’
})

//读取 路由参数接收
this.name = this.$route.params.namethis.age=this.$route.params.age