vue监听$route

App.vue

<router-link to="/detail/1">detail1</router-link>
<router-link to="/detail/2">detail2</router-link>
<router-link to="/detail/3">detail3</router-link>
<!-- 出口 -->
<router-view></router-view>

Detail.vue

<div>{{ $route.params.id }}--{{ myId }}</div>

  //   data() {
  //     return {
  //       paramId: this.$route.params.id,
  //     };
  //   },
  //   updated() {
  //     console.log(this.paramId);
  //   },
  //   watch: {
  //     $route(newVal) {
  //       console.log(newVal.params.id);
  //     },
  //   },
  computed: {
    myId() {
      return console.log(this.$route.params.id);
    },
  },

main.js

import Detail from '@/components/Detail.vue'

const router=new VueRouter({
  routes:[
    { path: '/detail/:id', component: Detail }
  ]
})

$route和$router路由实例的区别

1、$route 路由对象 学习它的3个属性

path哈希值

params动态路由参数

query查询参数

2、$router路由实例 学习它的3个方法

push()跳转

back()返回

replace()替换跳转 不能返回上一层