Vue动态路由配合watch实现ur更新l触发网络请求效果分页器点击触发事件修改url(修改$router.push)

效果

动画.gif 分页器点击触发事件修改url(修改$router.push), url被监听者当被更新触发新的网络请求,然后触发列表的更新

路由逻辑

有两套路由规则,可知可分类获取也可全部获取,使用pathname进行区分,/article为全部文章下,/article/cate/1 为分类下的文章

所有文章获取请求,params:page,limit,categoryId(分类ID,-1为全部文章否则为分类下)
获取所有文章分类

categoryId 文章获取

数据流

计算属性用于初次页面加载时网络请求, 后续需要持续监听url,使用watch

为什么$route 不需要this,使用watch选项定义观察程序时，您不需要使用this来引用组件实例。这是因为Vue会自动将观察程序的this上下文绑定到组件实例上

当route 改变时,他在设置loading效果,并页面跳转到顶部,并开始请求数据,然后取消当前loading效果

Pager 事件

分页器按钮触发handlePageChange事件传入按键绑定的页码

分页器点击会触发新的网络请求, 设置新的查询参数,page为按键事件的页码,页容量为url的limit默认为10,如果分类ID为-1,那么路由跳转到name:"blog"的路由,跳转到分类路由name:"CategoryBlog",

CategoryList 文章分类组件,

逻辑和BlogList相同,计算属性获取route信息,初始化首次数据,根据categoryId 设置当前class active 样式,

组件的渲染,通过请求分类数据渲染新的分类列表

由于数据中没有总结,需要二次加工下,添加一个全部的对象,是否为active 样式

事件绑定:

动态路由

路由路由属性在路由表中添加

{ name: "CategoryBlog", path: "/article/cate/:categoryId", component: Blog }, path中添加了:categoryId表示路由/articale/cate/xx xx是动态的,可以通过this.$route.params.categoryId 访问

我们希望下面的地址都能够匹配到 Blog组件

/article，显示全部文章
/article/cate/1，显示分类 id为 1的文章
/article/cate/3，显示分类 id为 3的文章
...

第一种情况很简单，只需要将一个固定的地址匹配到 Blog组件即可

{
  path: "/article",
  name: "Blog",
  component: Blog
}

但后面的情况则不同：匹配到 Blog组件的地址中，有一部分是动态变化的，则需要使用一种特殊的表达方式：

{
  path: "/article/cate/:categoryId",
  name: "CategoryBlog",
  component: Blog
}

在地址中使用 :xxx，来表达这一部分的内容是变化的，在 vue-router中，将变化的这一部分称之为 params，可以在 vue组件中通过 this.$route.params来获取

// 访问 /article/cate/3
this.$route.params // { categoryId: "3" }
// 访问 /article/cate/1
this.$route.params // { categoryId: "1" }

编程式导航

除了使用 <RouterLink>超链接导航外，vue-router还允许在代码中跳转页面

this.$router.push("跳转地址"); // 普通跳转
this.$router.push({ // 命名路由跳转
  name:"Blog"
})

this.$router.go(-1); // 回退。类似于 history.go

watch

利用 watch配置，可以直接观察某个数据的变化，变化时可以做一些处理

export default {
  // ... 其他配置
  watch: {
    // 观察 this.$route 的变化，变化后，会调用该函数
    $route(newVal, oldVal){
      // newVal：this.$route 新的值，等同 this.$route
      // oldVal：this.$route 旧的值
    },
    // 完整写法
    $route: {
      handler(newVal, oldVal){},
      deep: false, // 是否监听该数据内部属性的变化，默认 false
      immediate: false // 是否立即执行一次 handler，默认 false
    }
    // 观察 this.$route.params 的变化，变化后，会调用该函数
    ["$route.params"](newVal, oldVal){
      // newVal：this.$route.params 新的值，等同 this.$route.params
      // oldVal：this.$route.params 旧的值
    },
  	// 完整写法
    ["$route.params"]: {
      handler(newVal, oldVal){},
      deep: false, // 是否监听该数据内部属性的变化，默认 false
      immediate: false // 是否立即执行一次 handler，默认 false
    }
  }
}