vue路由嵌套SPA的实现方法

这次给大家带来vue路由嵌套SPA的实现方法,vue路由嵌套SPA实现的注意事项有哪些,下面就是实战案例,一起来看一下。

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

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

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

在A组件指定一个容器


登录后复制

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

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

登录后复制

补充:

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

代码

   路由嵌套       

{{msg}}

//登录组件 var myLogin = Vue.component("login",{ template:`

登录组件

登录

` })// 邮箱页面 var myMail = Vue.component("mail",{// 定义一个返回的方法 methods:{ goBack:function(){ this.$router.go(-1); } }, template:`

邮箱主页面

  • 收件箱
  • 发件箱
// 点击按钮返回前面的页面 <router-view></router-view>

`// 指定一个容器,加载收件箱或收件箱的列表 })// 收件箱组件 var myInBox = Vue.component("inbox-component",{ template:`

收件箱

  • 未读邮件1
  • 未读邮件2
  • 未读邮件3

` })// 发件箱组件 var myOutBox = Vue.component("outbox-component",{ template:`

发件箱

  • 已发送邮件1
  • 已发送邮件2
  • 已发送邮件3

` }) //配置路由词典 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:[]

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

以上就是vue路由嵌套SPA的实现方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2772086.html

(0)
上一篇 2025年3月8日 13:09:43
下一篇 2025年3月8日 13:09:49

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue组件怎么实现猜数字功能

    这次给大家带来vue组件怎么实现猜数字功能,vue组件实现猜数字功能的注意事项有哪些,下面就是实战案例,一起来看一下。 vue组件猜数字游戏 {{msg}} /* *创建一个组件,my-game: 猜数字大小。 组件:一个input和一个p…

    编程技术 2025年3月8日
    000
  • JS实现三级级联

    这次给大家带来JS实现三级级联,JS实现三级级联的注意事项有哪些,下面就是实战案例,一起来看一下。 本文实例为大家分享了js实现三级级联特效的具体代码,供大家参考,具体内容如下     //二维数组存放市的信息 var shi =[[“丽水…

    编程技术 2025年3月8日
    200
  • 原生JS怎么异步请求实现Ajax

    这次给大家带来原生JS怎么异步请求实现Ajax,原生JS异步请求实现Ajax的注意事项有哪些,下面就是实战案例,一起来看一下。 在前端页面开发的过程中,经常使用到Ajax请求,异步提交表单数据,或者异步刷新页面。 一般来说,使用Jquery…

    编程技术 2025年3月8日
    200
  • vue.js划分组件详细介绍

    这次给大家带来Vue.js如何划分组件,Vue.js划分组件的注意事项有哪些,下面就是实战案例,一起来看一下。 常见的一些页面,大家坐在一起敲代码就可以了,做完这个页面再做别的页面,但是作为一个功能复杂的系统,尤其是使用一些适合模块化开发的…

    编程技术 2025年3月8日
    200
  • 使用ES6中Class类的静态方法

    这次给大家带来使用ES6中Class类的静态方法,使用ES6中Class类静态方法的注意事项有哪些,下面就是实战案例,一起来看一下。 以前看过的es6的东西,又忘了,再总结下: 类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果…

    编程技术 2025年3月8日
    200
  • 使Cluster共享内存有哪些方法

    这次给大家带来使Cluster共享内存有哪些方法,使Cluster共享内存的注意事项有哪些,下面就是实战案例,一起来看一下。 Node.js的标准API没有提供进程共享内存,然而通过IPC接口的send方法和对message事件的监听,就可…

    编程技术 2025年3月8日
    200
  • JS模拟实现封装的方法

    这次给大家带来JS模拟实现封装的方法,JS模拟实现封装的注意事项有哪些,下面就是实战案例,一起来看一下。 前  言    继承是使用一个子类继承另一个父类,那么子类可以自动拥有父类中的所有属性和方法,这个过程叫做继承!  JS中有很多实现继…

    编程技术 2025年3月8日
    200
  • JS二叉树的先序中序及后序遍历实现方法

    这次给大家带来JS二叉树的先序中序及后序遍历实现方法,JS二叉树先序中序及后序遍历实现方法的注意事项有哪些,下面就是实战案例,一起来看一下。 之前学数据结构的时候,学了二叉树的先序、中序、后序遍历的方法,并用C语言实现了,下文是用js实现二…

    编程技术 2025年3月8日
    200
  • 图片滑动验证码怎样实现

    这次给大家带来图片滑动验证码怎样实现,图片滑动验证码实现的注意事项有哪些,下面就是实战案例,一起来看一下。 图片滑动验证码,逻辑是根据鼠标滑动轨迹,坐标位置,计算拖动速度等等来判断是否人为操作,当然下面的代码只是实现前端部分,只记录了拖动的…

    编程技术 2025年3月8日
    200
  • Angular4实现3d效果

    这次给大家带来Angular4实现3d效果,Angular4实现3d效果的注意事项有哪些,下面就是实战案例,一起来看一下。 Angular 是什么 Angular 是由谷歌开发与维护一个开发跨平台应用程序的框架,同时适用于手机与桌面。 An…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论