Vue实战记录(2)

2019.10.2----路由组件、静态布局

1、继续使用vant完成部分页面布局以及手写一个页面布局,对于vant需要现在main.js里面进行全局注册

2、对于需要重复出现在多个页面的部分进行独立成公共组件,建立好组件之后在main.js里面进行全局注册,然后那里需要就在哪里使用。注册全局组件如下

3、路由嵌套,某个路由组件下面还有<router-view>时,建立的路由列表要注意是一级还是二级,是应在存在于哪个<router-view>中

例如我建立的商品详情组件 是属于一级<router-view>里面,那么router.js里面路由映射列表就需要在一级下,此点虽然简单,但还是要注意一下

4、明白了一点就是其实整个静态布局过程很简单

路由组件放在views文件下(index.vue自动找到)  、公共组件放在components文件下(既可注册为全局组件,也可注册为局部组件)、router里面建立路由列表,将路由组件映射到对应的路由,在组件里面进行路由跳转,可以<router-link>也可以编程式导航。

原文地址:https://www.cnblogs.com/zyl0123/p/11617786.html

时间: 2024-10-10 21:19:05

Vue实战记录(2)的相关文章

Vue实战记录(1)---仅供自己参考

2019.10.1------底部标签栏 1.公共组件标签栏使用vant的Tabbar标签栏 首先需要安装vant依赖并在main.js里面按需引入 不要永远只写静态布局,把标签元素里面使用的属性存在组件的data里面(数组里面存放对象,方便获取),利用v-for以及属性绑定的方式生成页面结构.              2.编程式导航实现路由的跳转 这个vant标签栏自带to属性实现路由跳转 我们自己运用编程式的方式实现(这个标签栏自带change事件切换标签时触发) change事件方法实现

Vue实战记录(3)

2019.10.4----请求数据,组件传值.数据渲染 1.首页的结构是循环结构(标签页+content),这里的content是父组件(同时也属于公共组件),content又包括轮播图,分类宫格,商品列表这三个公共子组件.其结构一样,但是要根据请求到的数据进行对应的渲染. 在首页的index文件里面created周期里面Axios请求后端接口数据,将请求得到数据保存到组件的data属性中.index里面的content绑定属性拿到请求到的数据. 2.父组件传值 通过props拿到父组件的属性值

vue实战二

VUE 项目实战2 ----------------------------------------------- <template> <div id="app"> <!-- <loading v-show="loading"></loading> --> <router-view></router-view> <!-- <NavBottomView v-show=&q

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

系列教程一目录:.netcore+vue 前后端分离 系列教程二目录:DDD领域驱动设计 系列教程三目录:Nuxt.js TiBug系统 系列教程四目录:VueAdmin 后台管理系统 系列教程五目录:IdentityServer4 授权服务器 本文梯子 缘起 零.今天要完成左下角红色的部分 A.Vue 常见的IDE —— 我是开发工具,干活的都是我 1.VsCode 2.Webstorm 3.Atom B.安装Nodejs环境 —— 我是运行环境,没我不行 C.安装 npm / cnpm ——

vue实战(一):利用vue与ajax实现增删改查

vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> <%@ include file="../commons/taglib.jsp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.

云端大数据实战记录-大数据推荐

(转载请注明出处:http://blog.csdn.net/buptgshengod) 1.背景 这是博主第一次大数据实战的经历,之前都是自己写一些算法然后测试很小的数量级.这次是真正接触到TB集的数据,而且完全是在云端处理.下面就把这次的经历简单分享一下. 首先简单介绍一下这次比赛的环境吧: 1.云:采用的是阿里云 2.数据:从四月十五号到八月十五号期间,用户两千多万的购买行为(包括时间,购买.收藏.购物车的次数) 3.工具:阿里提供的xlab(里面有很多算法,随机森林.逻辑回归.knn等).

vue 使用记录

vue   使用记录 1.路径:http://localhost:8081/#/test?name=1 <router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>(id是参数) 使用:this.$route.query.id 2.路径:http://localhost:8081/#/test/1 <router-link :to="'/test/'+id"&g

vue实战使用ajax请求后台数据(小白)

vue实战使用ajax请求后台数据(小白) 前言:前端小白入门到这个阶段,应该会知道我们所做的页面上那些数据,绝大部分都不是静态的数据,而是通过调用后台接口把数据渲染到页面上的效果.ajax可以帮助我们更好的去实现这一点,下面是详解在vue中如何使用它. vue本身它是不支持直接发送ajax请求的,需要用到axios(一个基于promise的HTTP库,可以用在浏览器和node.js中)这是Axios文档的介绍,详细可查看:https://www.kancloud.cn/yunye/axios/

vue+vue-router+axios+element-ui构建vue实战项目之七(渲染content.vue内容)

在上一节<vue+vue-router+axios+element-ui构建vue实战项目之六(渲染index.vue列表)>中,我们从后端接口获取数据,并成功渲染出一个列表. 这节内容,我们来做内容页面. 编写src/page/content.vue 文件 话不多说,直接上代码 1 <template> 2 <div> 3 <h3>{{getMsg.title}}</h3> 4 <p>作者:{{getMsg.author.login