Vue3.0 中监听路由参数的改变方法大全

Vue 3.0 composition api 中监听路由参数改变

1. 像vue2中使用watch API 一样在setup函数中监听即可（vue3记得导入watch函数哦）

setup() {
   
   const article = reactive({
   ...});
   function fetchArticle(id) {
   
      //assign article..
   }
   watch('$route.params.articleId', fetchArticle)
   return {
    article };
}

2. 将参数与路由解耦，注入到组件的props中去进行监听

// router/index.js
const router = new VueRouter({
   
    routes: [{
   
        path: 'article/:articleId'
        component