关于Vue.js中的路由(Vue-router),你想知道的都在这里 !!!

路由


路由原理

  • 传统开发方式 url改变后 立刻发起请求,响应整个页面,渲染整个页面。
  • SPA 锚点值改变后 不会发起请求,发起ajax请求,局部改变页面数据,页面不跳转, 用户体验更好。

SPA

  • single page application(单页应用程序)
  • 前端路由
  1. 锚点值监视
  2. ajax获取动态数据
  3. 核心点是锚点值
  • 前端框架 Vue/angular/react都很适合开发单页应用

基本使用

  • vue-router
  • 其是vue的核心插件
  • 1: 下载 npm i vue-router -S
  • 1.2 (重要):安装插件Vue.use(VueRouter);
  • 2: 在main.js中引入vue-router对象 import VueRouter form './x.js';
  • 3: 创建路由对象 var router = new VueRouter();
  • 4: 配置路由规则 router.addRoutes([路由对象]);
    • 路由对象{path:'锚点值',component:要(填坑)显示的组件}
  • 5: 将配置好的路由对象交给Vue
    • 在options中传递-> key叫做 router
  • 6: 留坑(使用组件)

router-link

  • to
  • 帮助我们生成a标签的href
  • 锚点值代码维护不方便,如果需要改变锚点值名称
    • 则需要改变 [使用次数 + 1(配置规则)] 个地方的代码

命名路由

  • 1:给路由对象一个名称 { name:'home',path:'/home',component:Home}
  • 2:在router-link的to属性中描述这个规则
    • 通过名称找路由对象,获取其path,生成自己的href
  • 大大降低维护成本,锚点值改变只用在main.js中改变path属性即可

阶段总结

* vue-router使用步骤 : 
1:引入 2:安装插件 3:创建路由实例 4:配置路由规则  5:将路由对象关联vue 6:留坑
* router-link   to="/xxx"  命名路由   
1. 在路由规则对象中 加入name属性
2. 在router-link中  :to="{ name:"xxx'} "
  • 生僻API梳理:

1. Vue.use(插件对象); // 过程中会注册一些全局组件,及给vm或者组件对象挂在属性

2. 给vm及组件对象挂载的方式 :

Object.defineProperty(Vue.prototype,'$router',{get:function () {
 		return 自己的router对象;
    }
 })

参数router-link,

* `Vue.prototype.xxx = {add:fn}`
* 所有组件中,使用this.xxx就能拿到这个对象
* 查询字符串 
  * 1:配置`:to="{name:'detail',query:{id:hero.id} }"`
  * 2:规则 `{name:'detail',path:'/detail',component:Detail}`
  * 3:获取 `this.$route.query.id`
  * 4:生成 ``
* path方式 
  * 4:生成 ``
  * 1:配置 `:to="{name:'detail',params:{id:hero.id}  }"`
  * 2:规则 `{ name:'detail',path:'/detail/:id'}`
  * 3:获取 `this.$route.params.id`
* 查询字符串配置参数
  * router-link一次
  * 获取的时候一次
* path方式配置参数
  * router-link一次
  * 规则配置的时候声明位置
  * 获取的时候一次
* 总结书写代码注意事项
  * path方式需要在路由规则中声明位置

vue-router中的对象

  • $route 路由信息对象,只读对象
  • $router 路由操作对象,只写对象

嵌套路由

  • 市面上所谓的用单页应用框架开发多页应用
    • 嵌套路由
  • 案例:
    • 进入我的主页显示:电影、歌曲
  • 代码思想
    • 1:router-view的细分
      • router-view第一层中,包含一个router-view
    • 2:每一个坑挖好了,要对应单独的组件
  • 使用须知: 1:router-view包含router-view 2:路由children路由

知识点介绍

  • 路由meta元数据 -> meta是对于路由规则是否需要验证权限的配置
    • 路由对象中 和name属性同级 { meta:{ isChecked:true } }
  • 路由钩子 -> 权限控制的函数执行时期
    • 每次路由匹配后, 渲染组件到router-view之前
    • router.beforeEach(function(to,from,next) { } )

小试牛刀

  • 1: 使用koa 编写一个服务器…
    • a. /login的请求… ctx.body = { msg:‘ok’} 前端用jq发送ajax请求
  • 2: 客户端接收响应以后.如果是ok. localStroage中保存该值
  • 3: 在全局路由守卫中,区分/login 不验证(meta), /show 要验证, 验证条件就是从localStorage中获取

编程式导航

  • 1: 跳到指定的锚点,并显示页面 this.$router.push({ name:'xxx',query:{id:1},params:{name:'abc'} });
  • 2: 配置规则 {name:'xxx',path:'/xxx/:name'}
  • 3: 根据历史记录.前进或后退
    • this.$router.go(-1|1);
    • 1代表进一步,-1是退一步

如果这篇文章能够帮助到你,希望您不要吝惜点赞 ,您的支持是我继续努力的动力 !!!

你可能感兴趣的:(JavaScript,Vue.js,学习笔记,vue,js,javascript,前端,vue.js)