vue进阶-vue-route中 this.$router 与 this.$route 的区别

通过上章 vue进阶-vue-route 学习，我们发现路由的设置和获取会用到 this.$router 和 this.$route，容易混淆，本章做下区分。

this.$router

✨this.$router ：访问路由器。是一个全局的路由器对象，包含了很多属性和对象（比如 history 对象），任何页面都可以调用其 push()、replace()、 go() 等方法。

this.$route

✨this.$route：当前路由对象。每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name、path、params、query 等属性。

区别

• this.$router 是用来 操作 路由的
• this.$route 是用来 获取 路由信息的

// Home.vue
export default {
  computed: {
    username() {
      // 我们很快就会看到 `params` 是什么
      return this.$route.params.username
    },
  },
  methods: {
    goToDashboard() {
      if (isAuthenticated) {
        this.$router.push('/dashboard')
      } else {
        this.$router.push('/login')
      }
    },
  },
}

⚠️注： 要在 setup 函数中访问路由，请调用 useRouter 或 useRoute 函数。

我们会经常使用 router 实例，请记住，this.$router 与直接使用通过 createRouter 创建的 router 实例完全相同。我们使用 this.$router 的原因是，我们不想在每个需要操作路由的组件中都导入路由。

编程式导航

在 Vue 实例中，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。当你点击 时，内部会调用这个方法，所以点击 相当于调用 router.push(...)。

声明式	编程式
	router.push(…)

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })
注意：如果提供了 path，params 会被忽略。

router.push 和所有其他导航方法都会返回一个 Promise，让我们可以等到导航完成后才知道是成功还是失败。

路由传参

{
    name: child
    path: '/child/:id',
    component: Child
},
{
    name: user
    path: '/user',
    component: User
}

params传参

this.$router.push({
   path:'/child/${id}',
})
或者
this.$router.push({
   name: 'child',
   params: { id: '1001' }
})

获取params: this.$route.params.id

query 传参

this.$router.push({
   path:'/user', 
   query:{userId: '123'}
});
或者
this.$router.push({
   name: 'user', 
   query: {userId: '123'}
});

获取query：this.$route.query.userId

综合

this.$router.push({
   name: 'child',
   params: { id: '1001' },
   query: {title: '路由组件query传参', userName: 'Jack'}
})

获取params: this.$route.params.id
获取query：this.$route.query.userId