vue-router配置子路由
1.改写App.vue 里面的代码 ,增加路由跳转,增加Hi页面1,Hi页面2的跳转
2.修改HI.vue 里面的内容,增加
<router-view class="aaa"></router-view>
给子模板提供插入位置
3.在components目录下新建两个组件模板 Hi1.vue 和 Hi2.vue
Hi1.vue
<template>
<div class="hello">
<h1>{{msg}}</h1>
</div>
</template> <script>
export default {
name:'hi1',
data () {
return {
msg:'hi1,德国被逼平了'
}
}
} </script> <style scoped> </style>
Hi2.vue
<template>
<div class="hello">
<h1>{{msg}}</h1>
</div>
</template> <script>
export default {
name:'hi2',
data () {
return {
msg:'hi2,巴西也被逼平啦'
}
}
} </script> <style scoped> </style>
4.在router/indx.js 引入 组件Hi1和组件Hi2,在HI的路由配置中加入
children:[
{path:'/',component:Hi}, //'/',,根目录,这里指的是HI/
{path:'hi1',component:Hi1}, // /hi/hi1
{path:'hi2',component:Hi2}, ] // /hi/hi2
效果:
2018-06-18 10:17:19
vue-router配置子路由的更多相关文章
- Vue2+VueRouter2+webpack 构建项目实战(五):配置子路由
前言 通过前面几章的实战,我们已经顺利的构建项目,并且从API接口获取到数据并且渲染出来了.制作更多的页面,更复杂的应用,就是各位自己根据自己的项目去调整的事情了. 本章讲一下如何配置子路由,因为我们 ...
- vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
- Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转
问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...
- [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦
一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...
- Vue躬行记(8)——Vue Router
虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- Vue - Router 路由
路由的注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue router 一个路由对应多个视图
使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...
随机推荐
- 常用内置模块(二)——logging模块
logging模块 一.logging作用 1. 控制日志级别 2. 控制日志格式 3. 控制输出的目标为文件 二.日志级别 logging.debug( logging.info( loggin ...
- 当引入的类库存在一个类型时,提示“xxx”和“xxx”之间的不明确引用时,消除歧义的方法
//using _2_命名空间和程序集.WidgetA; //using _2_命名空间和程序集.WidgetB; using System; using System.Collections.Gen ...
- Feign 系列(03)Feign 工作原理
目录 Feign 系列(03)Feign 工作原理 1. Feign 是如何设计的 2. Feign 动态代理 2.1 ReflectiveFeign 构建 2.2 生成代理对象 2.3 Method ...
- 第十篇 scrapy item loader机制
在我们执行scrapy爬取字段中,会有大量的和下面的代码,当要爬取的网站多了,要维护起来很麻烦,为解决这类问题,我们可以根据scrapy提供的loader机制 def parse_detail(sel ...
- 笔记:Python列表和元组
列表 列表和字符串之间的转换 >>> li = list('hello') >>> li ['h', 'e', 'l', 'l', 'o'] >>> ...
- BCZM: Chapter 1
1.1 CPU 占用率 https://www.cnblogs.com/TenosDoIt/p/3242910.html 1.2 中国象棋将帅 https://blog.csdn.net/kabini ...
- Redis探索之路(四):Redis的五种数据类型Set和ZSet
一:Set无需集合 Set是个集合,string类型的无需集合,通过hash table实现,添加删除查找复杂度都是0(1).对集合我们可以取并集,交集和差集.通过这些操作我们可以实现sns中的好友推 ...
- UDP部分
IP地址:互联网协议地址,计算机的通行证.计算机在网络中的唯一身份标识.桥接:Ubuntu虚拟机 直接连到局域网NAT:网络地址转换点分十进制:192.168.14.115IP地址通常为4个字节,简称 ...
- 8-26接口压力测试-3Jmeter-Java请求
1.新建maven工程 2.导入依赖,并使用shade将所需的依赖打入jar包 <?xml version="1.0" encoding="UTF-8"? ...
- C#-Api:身份证识别
ylbtech-C#-Api:身份证识别 通过POST上传base64格式的图片内容,可识别二代身份证.驾照.行驶证.军官证.中华人民共和国往来港澳通行证.台湾居民往来大陆通行证.大陆居民往来台湾通行 ...