原文地址:https://banggan.github.io/2019/01/03/Vue路由/
Vue Router是Vue.js的官方路由器。它与Vue.js核心深度集成,使用Vue.js构建单页应用程序变得轻而易举。
- 使用步骤
- 引入vue-router对象
- 安装插件:Vue.use(VueRouter)
- 创建一个路由对象 var router = new VueRouter({routes:[]})
- 配置路由对象 :routes:[{path:’/login/:name’,component:xx} ]
- 将配置好的路由对象关联到事列中:router:router
- 指定路由改变局部的位置: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路由操作对象,只写对象
- 嵌套路由
单页面应用开发多页面的路由。多个组件按不同的锚点值填入不同的位置
使用规则:- router-view中包含router-view
- 路由规则中存在子路由
- 辅助知识点
- 路由meta元数据----meta对于路由规则是否需要验证权限的配置,路由对象中和name属性同级 {meta:{isChecked:true}}
- 路由钩子—权限控制的函数执行时期
- 每次路由匹配后,渲染组件到router-view之前
- router.beforeEach(function(to,from,next){ }):next()直接放行,next(){}跳转到相应的路由