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方式
  • 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(){}跳转到相应的路由
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页