4-6.vue-router的this.$router和this.$route

this.$router的含義

官方解釋：通過在 Vue 根例項的 router 配置傳入 router 例項。
this.$router可以看成是一個全域性的路由物件，它能夠在任何元件中使用。一般是用來做自定義的程式碼跳轉，與router-link具有相同的功能

this.$router的使用

1.程式碼展示

<template>
  <div id="nav">
    <button @click='jumpHome'>home</button>
    <button @click='jumpAbout'>about</button>
  </div>
  <router-view />
</template>

<script>
  export default {
    name: 'App',
    methods: {
      jumpHome() {
        // 這個相當於router-link最普通的用法
        this.$router.push('Home');
      },
      jumpAbout() {
        // 這個相當於router-link加了一個replace屬性
        this.$router.replace('About');
      }
    }
  }
</script>
<style>
</style>

2.過程分解

this.$router實現帶引數的寫法

1.程式碼展示

<template>
  <div id="nav">
    <button @click='jumpHome'>home</button>
    <button @click='jumpAbout'>about</button>
  </div>
  <router-view />
</template>

<script>
  export default {
    name: 'App',
    methods: {
      jumpHome() {
        // 這個相當於router-link最普通的用法
        this.$router.push({path:'Home', query:{name: '張三'}});
      },
      jumpAbout() {
        // 這個相當於router-link加了一個replace屬性
        this.$router.replace({name:'About', params:{userId: '123'}});
      }
    }
  }
</script>
<style>
</style>

2.過程分解

對比router-link的to屬性，對比著使用即可，只是換了一個實現規則，檢視router-link的to屬性使用連線：https://blog.csdn.net/weixin_45660035/article/details/111457630

this.$route的含義

表示當前啟用的路由物件，一般用來接收傳遞過來的資料。獲取當前的路由路徑等。

1.程式碼展示

配置頁面：

import { createRouter, createWebHistory } from 'vue-router'

const Home = () => import('../views/Home.vue')
const About = () => import('../views/About.vue')

const routes = [
  {
    path: '/Home',
    component: Home
  },
  {
    path: '/About/:userId',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

home元件：

<template>
  <div class="">
   <p>這是home頁面,獲取query方式傳遞的name值：{{this.$route.query.name}}</p>
  </div>
</template>

<script>

export default {
  name: 'Home',
}
</script>

about元件：

<template>
  <div class="about">
    <h1>這是about頁面,獲取params方式傳遞的userId值：{{this.$route.params.userId}}</h1>
  </div>
</template>
<script>

  export default {
    name: 'About',
  }
  </script>

2.注意重點

1. 引數的傳遞有兩種方式query和params這兩種，params方式只能和name屬性匹配，不然會出錯，query方式可以和path還有name屬性匹配。看上面程式碼時一定要注意這兩者在匹配頁面在js上面的區別；
2. query和params在傳遞引數後接收方式分別為this.$route.query.name和this.$route.params.userId；
3. 在推薦傳遞傾向使用query封裝成物件去取。

3.其他方法

this.$route.path:字串，對應當前路由的絕對路徑