Vue 高效开发 实践【三】

探究 router-view

在开发vue的单页面应用时，我们会遇到同一个component对应不同路径的时候，比如：

const routes = [
  {
    path: "/post-page/a",
    component: AComponent
  },
  {
    path: "/post-page/b",
    component: AComponent
  },

在组件内部，我们需要监听$route的变化，来初始化数据。

data() {
  return {
    loading: false,
    error: null,
    post: null
  }
}, 
watch: {
  '$route': {
    handler: 'resetData',
    immediate: true
  }
},

那么有没有更人性化的写法呢？
有的，实际上 router-view 也是组件，只不过是比较特殊的函数式组件，那么组件的创建与销毁，及复用和一般的组件其实是差不多的。
这时候大家一定想起了关键的一点： key
没错，key属性在diff dom 的时候非常有用（这里不展开讨论），所以，我们可以向这个组件加上key属性。

<router-view :key="$route.fullpath"></router-view>

使用fullpath作为key值，告诉框架，渲染的时候不要复用，因此大家就可以正常的使用created做初始化，当然，这会牺牲一点性能。