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配置子路由的更多相关文章

  1. Vue2+VueRouter2+webpack 构建项目实战(五):配置子路由

    前言 通过前面几章的实战,我们已经顺利的构建项目,并且从API接口获取到数据并且渲染出来了.制作更多的页面,更复杂的应用,就是各位自己根据自己的项目去调整的事情了. 本章讲一下如何配置子路由,因为我们 ...

  2. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  3. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  4. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  5. Vue躬行记(8)——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  6. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  7. Vue - Router 路由

    路由的注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  9. Vue router 一个路由对应多个视图

    使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...

随机推荐

  1. 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM

    JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...

  2. html5本地存储(一)------ web Storage

    在html5中与本地存储相关的两个相关内容:Web Storage  与本地数据库 web Storage存储机制是对html4中的cookie存储机制的一个改善.web Storage就是在web上 ...

  3. 【POJ】2031 Building a Space Station

    题目链接:http://poj.org/problem?id=2031 题意:修建太空站每个舱之间的走廊.每个舱都是球体.给出n个舱的三维空间坐标以及球体半径.如果球体之间接触或者相接,就不用修走廊. ...

  4. locust性能测试框架随笔

    现在有很多的性能测试工具,比如说我们熟悉的loadrunner.jmeter.ab.webbench等等,这些工具如果对一个没用过的朋友来说,学习起来比较不容易,但是如果你能看懂python代码,会写 ...

  5. vimtutor - Vim 教程

    总览 (SYNOPSIS) vimtutor 描述 (DESCRIPTION) Vimtutor 打开 Vim 教程. 它首先 考备 文件, 这样 就可以 在 不改变 原文件 的情况下 修改 当前文件 ...

  6. Bash 脚本 set 命令教程

    http://www.ruanyifeng.com/blog/2017/11/bash-set.html set命令是 Bash 脚本的重要环节,却常常被忽视,导致脚本的安全性和可维护性出问题.本文介 ...

  7. Jvm之class文件的加载、初始化

    编写的java文件在要真正运行时,会首先被编译成 “.class"结尾的二进制文件,然后被虚拟机加载.那么在虚拟机中一个class文件要成为java实例,需要经历好几个步骤: 一.class ...

  8. 安装监控MongoDB的Python安装包时候报错:HTTP Error 403: SSL is required

    安装pymongo-2.3.tar.gz,执行命令python setup.py install报错: HTTP Error 403: SSL is required 分析原因:安装需要下载这个dis ...

  9. js 购物车的数量加减,对应的总价也随机变化

    html相关的源码: <div class="goods_num clearfix"> <div class="num_name fl"> ...

  10. php 使用fseek指针读取大文件日志

    function text($fp,$n,$b=5) { if($n>0){ $p = $n+1; $lines = array(); while(count($lines)< =$n){ ...