Vue基础知识点-路由

原文地址：https://banggan.github.io/2019/01/03/Vue路由/
Vue Router是Vue.js的官方路由器。它与Vue.js核心深度集成，使用Vue.js构建单页应用程序变得轻而易举。

• 使用步骤
  1. 引入vue-router对象
  2. 安装插件：Vue.use(VueRouter)
  3. 创建一个路由对象 var router = new VueRouter（{routes：[]}）
  4. 配置路由对象 :routes:[{path:’/login/:name’,component:xx} ]
  5. 将配置好的路由对象关联到事列中:router:router
  6. 指定路由改变局部的位置:router-link ：to=‘’
• 查询字符串
  • 配置：to =“{name:‘detail’,query:{id:hero.id} }”
  • 规则：{name：‘detail’,path:’/detail’,component:Detail}
  • 获取：this.$route.query.id
  • 生成：
• path方式
  • 配置：to =“{name:‘detail’,params:{id:hero.id} }”
  • 规则：{name：‘detail’,path:’/detail’/ :id}
  • 获取：this.$route.params.id
  • 生成：
    path方式需要在路由规则中声明位置
• vue-router中的对象
  • $route路由信息对象，只读对象
  • $router路由操作对象，只写对象
• 嵌套路由
  单页面应用开发多页面的路由。多个组件按不同的锚点值填入不同的位置
  使用规则：
  1. router-view中包含router-view
  2. 路由规则中存在子路由
• 辅助知识点
• 路由meta元数据----meta对于路由规则是否需要验证权限的配置,路由对象中和name属性同级 {meta：{isChecked：true}}
• 路由钩子—权限控制的函数执行时期
  • 每次路由匹配后，渲染组件到router-view之前
  • router.beforeEach(function(to,from,next){ }):next()直接放行，next(){}跳转到相应的路由