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 相关文章推荐
List the UTC Time on a Computer
Jun 11 Javascript
关于JavaScript的一些看法
May 27 Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
vue 实现移动端键盘搜索事件监听
Nov 06 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
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
JavaScript 注册事件代码
2011/01/27 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
Python调用Windows命令打印文件
2020/02/07 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
Django自带的用户验证系统实现
2020/12/18 Python
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
环境科学专业个人求职信
2013/12/15 职场文书
暑期研修感言
2014/02/17 职场文书
文艺晚会策划方案
2014/06/11 职场文书
租房协议书范文
2014/08/20 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python
SQL 聚合、分组和排序
2021/11/11 MySQL
ubuntu下常用apt命令介绍
2022/06/05 Servers