文章列表页逻辑
路由跳转逻辑
组件逻辑
BlogList
BlogCategory
知识
动态路由
我们希望下面的地址都能够匹配到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" }
动态路由的导航
<router-link to="/article/cate/3">to article of category 3</router-link>
<router-link :to="{
name: 'CategoryBlog',
params: {
categoryId: 3
}
}">to article of category 3</router-link>
编程式导航
除了使用<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
}
}
}
路由可以作为计算属性的依赖。
当地址变化的时候，会产生一个新的route对象，这样监控route就可以监控到了。 如果仅仅是指route对象的一个属性发生了改变，监控不到类似于kvo。 如果要监控route的某个属性发生改变需要按照下面的写：
