vue路由嵌套的SPA实现步骤


Posted in Javascript onNovember 06, 2017

本文为大家分享了路由嵌套的SPA实现的步骤:

A(/a)组件需要嵌套B组件(/b)和C组件(/c)

①准备嵌套其它组价的父组件 指定一个容器

在A组件指定一个容器
<router-view></router-ivew>

②在A组件的路由配置对象中指定children属性

{
path:'/a',
component:A,
children:[
{path:'/b',component:B},
{path:'/c',component:C},
]
}

补充:

//数字如果超出记录的次数,是不行的。
this.$router.go(num);
如果num是正数,向前进
如果num是负数,向后退

代码

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>路由嵌套</title>
  <script src="js/vue.js"></script>
  <script src="js/vue-router.js"></script>
 </head>
 <body>
 <div id="container">
    <p>{{msg}}</p>
    <router-view></router-view>
  </div>
  <script>
//登录组件
    var myLogin = Vue.component("login",{
      template:`
        <div>
          <h1>登录组件</h1>
          <router-link to="/mail">登录</router-link>
        </div>
    `
    })
//  邮箱页面
    var myMail = Vue.component("mail",{
//    定义一个返回的方法
      methods:{
        goBack:function(){
          this.$router.go(-1);
        }
      },
      template:`
        <div>
          <h1>邮箱主页面</h1>
          <ul>
            <li>
              <router-link to="/inbox">收件箱</router-link>
            </li>
            <li>
              <router-link to="/outbox">发件箱</router-link>
            </li>
          </ul>
//        点击按钮返回前面的页面
          <button @click="goBack">返回</button>
          <router-view></router-view>
        </div>
    `
//  指定一个容器,加载收件箱或收件箱的列表
    })
//  收件箱组件
    var myInBox = Vue.component("inbox-component",{
      template:`
        <div>
          <h4>收件箱</h4>
          <ul>
            <li>未读邮件1</li>
            <li>未读邮件2</li>
            <li>未读邮件3</li>
          </ul>
        </div>
    `
    })
//  发件箱组件
    var myOutBox = Vue.component("outbox-component",{
      template:`
        <div>
          <h4>发件箱</h4>
          <ul>
            <li>已发送邮件1</li>
            <li>已发送邮件2</li>
            <li>已发送邮件3</li>
          </ul>
        </div>
    `
    })
    //配置路由词典
    new Vue({
      router:new VueRouter({
        routes:[
          {path:'',redirect:'/login'},
          {path:'/login',component:myLogin},
          {path:'/mail',component:myMail,children:[
            {path:'/inbox',component:myInBox},
            {path:'/outbox',component:myOutBox}
        ]},
        ]
      }),
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
    //通过再次指定一个<router-view></router-view>和children:[]
  </script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 一些用法小结
Sep 11 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
vue实现购物车小案例
Sep 27 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
vue综合组件间的通信详解
Nov 06 #Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 #Javascript
详解基于vue-cli优化的webpack配置
Nov 06 #Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 #Javascript
js中apply与call简单用法详解
Nov 06 #Javascript
js实现简单数字变动效果
Nov 06 #Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 #Javascript
You might like
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
清除输入框内的空格
2016/12/21 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
python开发游戏的前期准备
2019/05/05 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
python excel多行合并的方法
2020/12/09 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
机关作风整顿个人整改措施2014
2014/09/17 职场文书
车间统计员岗位职责
2015/04/14 职场文书
前台岗位职责范本
2015/04/16 职场文书
律师函格式范本
2015/05/27 职场文书
东京审判观后感
2015/06/01 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
Redis集群的关闭与重启操作
2021/07/07 Redis
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL
MySQL导致索引失效的几种情况
2022/06/25 MySQL