Vue.js暑假学习心得三

Vue.js路由视图

Vue.js本身没有路由机制，故需要以插件vue-router实现路由

用npm install vue-router 安装插件 然后在代码中调用vue-router

var Vue=require('vue')
var VueRouter=require('vue-router')
Vue.use(VueRouter)

视图部分

在vue-router中使用<a v-link='{path:'   '}">XXX</a>的v-link属性而不是href属性进行导航，当点入XXX时vue-router会在路由映射中匹配path中的路由规则，如果成功匹配到会将对应路由组件的模板内容渲染到router-view区域中，如果path中的值既不是字符串也不是对象字面量，则会被当做对应组件的数据属性来解析

在vue-router中使用router-view来渲染匹配的组件，router-view是一个Vue组件，特性为通过props传递数据；支持v-transition和

transition-mode；支持v-ref，被渲染的组件会注册到父级组件的this.$对象中；支持slot，router-view中的HTML内容会被插入到相应路由组件模板的slot中。

路由实例

用Webpack模块化开发时可以结合Webpack的代码分割以及Vue组件的resolve来实现

/src/router/index.js为路由模块配置文件

然后需要在入口文件配置引入对应的路由

使用路由参数时，原来的组件实例也会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过这也意味着组件的生命周期钩子不会再被调用。复用组件时，想对路由参数的变化作出响应的话，可以简单地 watch (监测变化) $route 对象

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。这时候可使用props将组件和路由解耦。props可分别为布尔型，对象型和函数型