通過上章 ??vue進(jìn)階-vue-route 學(xué)習(xí)，我們發(fā)現(xiàn)路由的設(shè)置和獲取會(huì)用到 this.$router 和 this.$route，容易混淆，本章做下區(qū)分。

this.$router

?this.$router ：訪問路由器。是一個(gè)全局的路由器對(duì)象，包含了很多屬性和對(duì)象（比如 history 對(duì)象），任何頁面都可以調(diào)用其 push()、replace()、 go() 等方法。

vue獲取路由路徑數(shù)組？

this.$router.options.routes 或者 this.$route.matched

this.$route

?this.$route：當(dāng)前路由對(duì)象。每一個(gè)路由都會(huì)有一個(gè) route 對(duì)象，是一個(gè)局部的對(duì)象，可以獲取對(duì)應(yīng)的 name、path、params、query 等屬性。

區(qū)別

• ??this.$router 是用來 操作 路由的
• ??this.$route 是用來 獲取 路由信息的

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

??注： 要在 setup 函數(shù)中訪問路由，請(qǐng)調(diào)用 useRouter 或 useRoute 函數(shù)。

?? 我們會(huì)經(jīng)常使用 router 實(shí)例，請(qǐng)記住，this.$router 與直接使用通過 createRouter 創(chuàng)建的 router 實(shí)例完全相同。我們使用 this.$router 的原因是，我們不想在每個(gè)需要操作路由的組件中都導(dǎo)入路由。

編程式導(dǎo)航

在 Vue 實(shí)例中，你可以通過 $router 訪問路由實(shí)例。因此你可以調(diào)用 this.$router.push。當(dāng)你點(diǎn)擊 <router-link> 時(shí)，內(nèi)部會(huì)調(diào)用這個(gè)方法，所以點(diǎn)擊 <router-link :to="..."> 相當(dāng)于調(diào)用 router.push(...)。

該方法的參數(shù)可以是一個(gè)字符串路徑，或者一個(gè)描述地址的對(duì)象。例如：

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

// 帶有路徑的對(duì)象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上參數(shù)，讓路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 帶查詢參數(shù)，結(jié)果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 帶 hash，結(jié)果是 /about#team
router.push({ path: '/about', hash: '#team' })
注意：如果提供了 path，params 會(huì)被忽略。

??router.push 和所有其他導(dǎo)航方法都會(huì)返回一個(gè) Promise，讓我們可以等到導(dǎo)航完成后才知道是成功還是失敗。文章來源地址http://www.zghlxwxcb.cn/news/detail-577742.html

路由傳參

{
    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

到了這里，關(guān)于vue進(jìn)階-vue-route中 this.$router 與 this.$route 的區(qū)別的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！