Vue——$router和$route的区别是什么？路由传参的两种方法/形式是什么？

一、$router和$route的区别是什么

1、$router是一个全局对象，通过Vue.use(VueRouter)获得，上面有许多操作路由的方法（比如go、back、forward、push、replace）以及路由守卫（beforeEach、afterEach、beforeResolve）

2、每个路由对象都有一个$route，可以访问到当前路由上的信息（比如fullPath、params、path、query等）

二、Vue路由传参详解

方法一：params传参

params传参类似post请求，配合name使用，传过去的参数不会显示在地址栏中。

编程式导航：

login() {
  // ...
  this.$router.push({
    name: 'home', //注意使用 params 时一定不能使用 path
    params: { username: 'admin' },
  })
}

声明式导航：

<router-link :to="{ name: 'home', params: { username: 'admin'} }">

方式二：query传参

query传参类似get请求，配合path使用，传过去的参数会显示在地址栏中。

编程式导航：

login() {
  // ...
  this.$router.push({
    path: 'home', //注意使用 params 时一定不能使用 path
    query: { username: 'admin' },
  })
}

声明式导航：

<router-link :to="{ path: 'home', query: { username: 'admin'} }">