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 相关文章推荐
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
关于JS字符串函数String.replace()
Apr 07 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 Javascript
Ajax常用封装库——Axios的使用
May 08 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
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
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
php文件下载处理方法分析
2015/04/22 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
PHP反射学习入门示例
2019/06/14 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
原生js仿浏览器滚动条效果
2017/03/02 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python做简单的字符串匹配详解
2017/03/21 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
python3 logging日志封装实例
2020/04/08 Python
Python LMDB库的使用示例
2021/02/14 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
Linux的主要特性
2014/10/06 面试题
车间统计员岗位职责
2014/01/05 职场文书
揠苗助长教学反思
2014/02/04 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
大专生自荐书范文
2014/06/22 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
教师年度考核个人总结
2015/02/12 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
Vue3中的Refs和Ref详情
2021/11/11 Vue.js
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python