vue从入门到精通之进阶篇(一)vue-router基础

本文详细介绍了Vue Router的使用与原理。阐述了传统开发与SPA的区别,SPA通过监视锚点值、用ajax获取动态数据,提升用户体验。还说明了Vue Router的基本使用步骤,包括下载、安装、配置等,介绍了命名路由、参数传递、嵌套路由等内容,以及路由meta元数据和路由钩子。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

路由原理
  • 传统开发方式 url改变后 立刻发起请求,响应整个页面,渲染整个页面
  • SPA 锚点值改变后 不会发起请求,发起ajax请求,局部改变页面数据
    • 页面不跳转 用户体验更好
SPA
  • single page application(单页应用程序)
  • 前端路由
    • 锚点值监视
    • ajax获取动态数据
    • 核心点是锚点值
  • 前端框架 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-view></router-view>
router-link
  • to
  • 帮助我们生成a标签的href
  • 锚点值代码维护不方便,如果需要改变锚点值名称
    • 则需要改变 [使用次数 + 1(配置规则)] 个地方的代码
命名路由
  • 1:给路由对象一个名称 { name:'home',path:'/home',component:Home}
  • 2:在router-link的to属性中描述这个规则
    • <router-link :to="{name:'home'}></router-link>"
    • 通过名称找路由对象,获取其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’} "

52855161286

  • 生僻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:生成 <a href="/detail?id=1">
  • path方式
    • 4:生成 <a href="/detail/1">
    • 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) { } )
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值