摘要: 全局导航守卫:解释不清 需求:希望点击每个菜单是,网页的title显示菜单名称。 2种方式实现 方式1:每个组件通过回调生命周期函数时,来创建一个title元素 Home.vue,About.vue 1 <template> 2 <div> 3 <h2>我是首页</h2> 4 <router-lin 阅读全文
posted @ 2021-07-08 21:32 kaer_invoker 阅读(238) 评论(0) 推荐(0) 编辑
摘要: 之前使用的parameters的方式传递参数,现在介绍另一个传递阐述的方式,query. 一、通过router-link使用query传递 1、创建Profile.vue组件 2、路由器定义了Profile组件的路由 3、在App.vue中使用<router-link>标签引用profile,但是引 阅读全文
posted @ 2021-07-08 20:38 kaer_invoker 阅读(237) 评论(0) 推荐(0) 编辑
摘要: 以下是嵌套路由设置方法 一、创建嵌套组件 比如Home下有1个新闻列表和一个消息列表。分别创建新闻组件和消息组件,这2个组件和Home组件不是父子组件关系 HomeNews.vue 1 <template> 2 <div> 3 <ul> 4 <li>新闻1</li> 5 <li>新闻2</li> 6 阅读全文
posted @ 2021-07-08 18:25 kaer_invoker 阅读(50) 评论(0) 推荐(0) 编辑
摘要: 一、vuecli 2 打包 npm run build进行打包,打包完成后检查dist下的包 dist/static/css dist/static/js 原因,原来的webpack打包始终只有一个文件,会导致文件过大,而这里vue cli2对包进行了分包,可以方便客户端浏览器加载。 分析下包: c 阅读全文
posted @ 2021-07-08 14:25 kaer_invoker 阅读(249) 评论(0) 推荐(0) 编辑
摘要: 一、动态路由: 需求:希望页面点击不同用户名称链接(父组件),进入不同用户详情的Url(路由),且在用户详情页显示不同的详情信息(子组件) 逻辑:父组件的用户名称userName(数据源)-->将名称传给父组件的router-link(<router-link :to="‘/user/+userNa 阅读全文
posted @ 2021-07-08 14:08 kaer_invoker 阅读(196) 评论(0) 推荐(0) 编辑
摘要: 1.可以通过代码的方式结合router-view来实现跳转 1 <template> 2 <div> 3 <!-- <router-link to="/home" tag="button" replace="" active-class="active">首页</router-link>--> 4 阅读全文
posted @ 2021-07-08 12:18 kaer_invoker 阅读(246) 评论(0) 推荐(0) 编辑
摘要: 1.创建vue init webpack vuerouter项目 2.不使用vue-router创建。 3.npm install vue-router --save 单独安装 4.创建/router/index.js文件 1 import VueRouter from 'vue-router' 2 阅读全文
posted @ 2021-07-08 12:08 kaer_invoker 阅读(166) 评论(0) 推荐(0) 编辑
摘要: 一、控制台的几个命令 1.刷新页面 console控制台设置: location.href = 'aaaa' 此时页面会重新请求页面数据 2.不刷新页面 console控制台设置: location.hash= ‘aaa’ 通过哈希的方式改变,前端不会重新请求前端数据。 3.不刷新页面2 conso 阅读全文
posted @ 2021-07-07 17:49 kaer_invoker 阅读(413) 评论(0) 推荐(0) 编辑
摘要: 一、路由 路由作用:A在公网IP1给公网IP2的B发送一条信息msg1,到了公网IP2后,msg1信息会进入公网IP2的内部路由器,再有路由器参照路由内部IP与B所在的电脑mac地址分配信息给B。因此,路由的核心是内部有一个内网IP与电脑MAC的对应关系映射表。 二、前端渲染,后端渲染 阶段一:后端 阅读全文
posted @ 2021-07-07 17:26 kaer_invoker 阅读(41) 评论(0) 推荐(0) 编辑
摘要: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>01-箭头函数</title> 6 </head> 7 <body> 8 <script> 9 // 1.定义函数的方式1 10 11 12 阅读全文
posted @ 2021-07-07 16:40 kaer_invoker 阅读(62) 评论(0) 推荐(0) 编辑