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

路由原理

  • 传统开发方式 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) { } )

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249260.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自动计算请假工时 排除周六周日

/*** 请假工时计算* starttime 开始时间 "2019-03-28 16:02", endtime 结束时间 "2019-03-29 16:02"*/ function leaveTime(starttime, endtime) {var start new Date(starttime); //start Thu Mar 28 2019 16:02:00 GMT0800 (中国标准时间)var end new…

垃圾回收与内存管理

垃圾回收机制 Javascript采用 自动垃圾收集机制&#xff0c;执行环境会负责跟踪代码执行过程中使用的内存&#xff0c;而在C和C类的语言中&#xff0c;需要开发人员手工跟踪内存的使用情况。 该机制的实现原理&#xff1a;找出那些不再继续使用的变量&#xff0c;然后释放其占用…

spring官方网站

https://docs.spring.io/spring/docs/current/spring-framework-reference/overview.html#overview

vue从入门到精通之进阶篇(三)axios

基本使用 Axios.method(url,[,..data],options) .then(function(res){ }) .catch(function(err) { } ) 合并请求 this.$axios.all([请求1,请求2]) .then( this.$axios.spread(function(res1,res2){ }) ) 拦截器 单请求配置options: axios.post(url,data,options); 全局配…

使用CSS实现图片未加载完成时占位显示

通过css控制&#xff0c;可以实现加载网络图片时&#xff0c;未加载完成的时候显示本地一张占位图&#xff0c;加载完成后显示网络图片&#xff1b; 原理&#xff1a;通过在img标签的after伪元素上添加一张占位图&#xff0c;并且img都设置为position:relative;after设置positi…

数学符号历史

https://baike.baidu.com/item/%E6%95%B0%E5%AD%A6%E7%AC%A6%E5%8F%B7/685756?fraladdin

POJ2828 Buy Ticket

传送门 题目大意&#xff1a;给一段空序列&#xff0c;每次向序列中某一个位置插入一个数&#xff0c;插入的位置后面所有数相应后移。 这个题比较令人头疼的是后移操作&#xff0c;我们不可能大面积后移。那怎么办呢&#xff1f;后面的人对前面有影响&#xff0c;那我们能不能…

vue从入门到精通之进阶篇(四)模块化工具 webpack

模块化 webpack命令 npm init -y npm install webpack3.6.0 --save-dev --registry https://registry.npm.taobao.orgpackage.json文件 "scripts": { "test": "webpack ./main.js ./build.js" },命令行运行 npm run test ES6模块 导入和导出只…

微观经济学

chapter1 导论 学经济学有啥用&#xff1f;找工作有用吗&#xff1f;没有用&#xff0c;但是当你失业的时候你就知道为什么了。为什么会有经济学&#xff1f;资源的稀缺性导致的问题&#xff01; 1.1.稀缺性 既定的资源无法满足人们的欲望。稀缺性存在于任何地方&#xff0c;产…

树结构

https://baike.baidu.com/item/%E6%A0%91%E7%BB%93%E6%9E%84/3399688?fraladdin

C#事务提交

using (System.Transactions.TransactionScope transcope new System.Transactions.TransactionScope()) { //code something transcope.Complete(); }转载于:https://www.cnblogs.com/WuHZ/p/9797373.html

vue从入门到精通之进阶篇(五)脚手架vue-cli

vue-cli2.x脚手架的使用 参考链接&#xff1a;https://github.com/vuejs/vue-cli/tree/v2#vue-cli-- 安装&#xff1a; npm install -g vue-cli用法&#xff1a; $ vue init < template-name > < project-name >例&#xff1a; $ vue init webpack my-projec…

ES6 数值的扩展

ES6 规范了二进制和八进制的表示方法&#xff0c;代码如下&#xff1a; console.log(0o2000 1024) //true 使用0o表示八进制 0是数字0 o是小写字母oconsole.log(0b10000000000 1024) //true 使用0b表示二进制 0是数字…

树的定义

https://www.cnblogs.com/jpfss/p/10842521.html

【Java】 剑指offer(27) 二叉树的镜像

本文参考自《剑指offer》一书&#xff0c;代码采用Java语言。 更多&#xff1a;《剑指Offer》Java实现合集 题目  请完成一个函数&#xff0c;输入一个二叉树&#xff0c;该函数输出它的镜像。 思路 画图可以很清晰地得到思路&#xff1a;先前序遍历&#xff0c;对每个结点交…

vue从入门到精通之进阶篇(一)vue-router:导航守卫

vue-router的导航守卫之在导航完成后获取数据 需求&#xff1a;在导航完成之后加载数据。渲染DOM <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title></title> </head> <body><di…

Unity 新手入门 如何理解协程 IEnumerator yield

Unity 新手入门 如何理解协程 IEnumerator 本文包含两个部分&#xff0c;前半部分是通俗解释一下Unity中的协程&#xff0c;后半部分讲讲C#的IEnumerator迭代器 协程是什么&#xff0c;能干什么&#xff1f; 为了能通俗的解释&#xff0c;我们先用一个简单的例子来看看协程可以…

百万级数据库优化方案

一、百万级数据库优化方案 1.对查询进行优化&#xff0c;要尽量避免全表扫描&#xff0c;首先应考虑在 where 及 order by 涉及的列上建立索引。 2.应尽量避免在 where 子句中对字段进行 null 值判断&#xff0c;否则将导致引擎放弃使用索引而进行全表扫描&#xff0c;如&#…

vue从入门到精通之进阶篇(二)组件通信:兄弟组件通信

$emit和$on进行组件之间的传值 注意&#xff1a;emit和emit和emit和on的事件必须在一个公共的实例上&#xff0c;才能够触发 需求&#xff1a; ​ 1.有A&#xff0c;B&#xff0c;C三个组件&#xff0c;同时挂载到入口组件中 ​ 2.将A组件中的数据传递到C组件&#xff0c;再将…

树结构的性质

非空树的结点总数等于树种所有结点的度之和加 1度为 K 的非空树的第 i 层最多有 ki-1 个结点(i > 1)深度为 h 的 k 叉树最多有(kh - 1)/(k - 1)个结点具有 n 个结点的 k 叉树的最小深度为 logk(n(k-1)1))