vueでthis.$routerとthis.$routeの違い

vue公式サイトはthis.$routerとthis.$routeの定義を与えます.

this.$router

routerインスタンス.

this.$route

現在アクティブなルーティング情報オブジェクト.この属性は読み取り専用で、中の属性はimmutable(可変)ですが、watch(変化を監視)することができます.
this.$router:グローバルルータrouterの例です.任意のコンポーネントにアクセスできます.ルーティングの例には と がたくさんあります.次に例を挙げます.

//           
this.$router.push('/home');

もっと多くの属性と方法、みんなはvueの公式サイトに行って検索することができて、具体的な住所
this.$route:現在のページのルーティング情報オブジェクトで、現在のURL解析で得られた情報と、URLが一致するルーティングレコード(route records)が含まれています.いくつかの属性もあります.次に例を挙げます.

this.$route.query.index //      query     index

総合応用:
任意のコンポーネント内でthis.$routerを介してルータにアクセスしたり、this.$routeを介して現在のルーティングにアクセスしたりすることができます.

// Home.vue
export default {
     
  computed: {
     
    username() {
     
      //          `params`    
      return this.$route.params.username
    }
  },
  methods: {
     
    goBack() {
     
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  }
}