Vue中this.$router 和this.$route的理解

Vue中this.$router和this.$route的理解

$router` 和`$route

1. this.$router路由实例

$router表示一个全局的路由对象， vue-router 的实例，提供addRoutes、back等方法，相当于一个路由的管理者角色。

• this.$router.options.routes():获取当前的路由配置
• router.forward() 导航前进一步，但是不刷新前进页的表单，类似于router.go(1)
• this.$router.resolve()想在新页面打开

kotlin
复制代码this.$router.resolve({name: '', params: {}}) window.open(href.href, '_blank');

• router.beforeEach()是路由的全局导航守卫

vbnet
复制代码router.beforeEach((to, from, next) => { next() });

• router.afterEach()

和beforeEach()相比，这个router方法是在路由进入之后触发，并且少了一个参数next()，不需要调用next进入

javascript
复制代码router.afterEach((to, from) => {})

• router.beforeResolve()

目前看来和beforeEach()没有区别，都可以做同样的操作

2. this.$route

route表示当前路由对象，包含具体的路由名称、path、query 、params 等属性，其实就是routes（ new Router时声明的routes）里面的一条具体的路由。

• $route.path

字符串，等于当前路由对象的路径，如“/home/news”。

• $route.query

对象，包含路由中query参数的键值对。如“......？name=qq&age=18”会得到{“name”："qq"，“age”：18}。

• $route.name 当前路径的名字，如果没有使用具名路径，则名字为空。
• $route.router 路由规则所述的路由器（以及所属的组件）。
• $route.matched 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
• $route.params 对象，包含路由中的动态片段和全匹配片段的键值对。

params 无值共有两种情况会出现：

1 router push params 无值

路由跳转代码：

php复制代码this.$router.push({
        path: "/cost/order/detail/",
        params: row,
});

运行的时候发现params为空对象，对象row没有传入：

后来换成这样：

php复制代码this.$router.push({
        path: "/cost/order/detail/" + row.id,
        params: row,
});

发现params 值只有一个id。很是奇怪，于是查了下官网，找到了答案！\

原来路由跳转的时候用path，params是会被忽略的，需要把path换成name。

php复制代码   this.$router.push({
        name: "detail",
        params: row,
   });

修改之后params确实传过去了。但当页面一刷新，params就会变成空对象，就是下面要说的第二种params 无值问题。

2 页面刷新params无值

这种情况需要参考第一部分的第二个代码示例：将 params 设置为路由的一部分。

arduino
复制代码 'detail/:id'

新页面根据这个id，重新查询一遍row,功能完成。

最后，了解下query和params方式区别：

• query相当于get请求，页面跳转可以在地址栏看到参数
• params相当于post请求，参数不会再地址栏显示
  w`,功能完成。

最后，了解下query和params方式区别：

• query相当于get请求，页面跳转可以在地址栏看到参数
• params相当于post请求，参数不会再地址栏显示
• 二者可以一起使用,尤其参数较多时。如果参数相当多，可以考虑本地存储