这次给大家带来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是负数，向后退

代码

路由嵌套

//登录组件

var myLogin = Vue.component("login",{

template:`

登录组件

})

// 邮箱页面

var myMail = Vue.component("mail",{

// 定义一个返回的方法

methods:{

goBack:function(){

this.$router.go(-1);

}

template:`

邮箱主页面

收件箱
发件箱

// 点击按钮返回前面的页面

// 指定一个容器,加载收件箱或收件箱的列表

})

// 收件箱组件

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"

}

})

//通过再次指定一个和children:[]

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

php spa结合,vue路由嵌套SPA的实现方法相关推荐

vue 路由嵌套(二级路由)
路由嵌套就是在父路由配置好后,配置一个children属性,里面放置的的内容跟routes属性下面的内容大体一样,这就是二级路由的配制方法. 嵌套路由的关键字children,在父路由中添加child ...
Vue路由实现SPA
一.SPA 1.SPA是什么单页Web应用(single page application,SPA),就是只有一个Web页面的应用,是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的W ...
vue路由嵌套无法渲染页面空白
在学习vue的时候,根据官方教程卸了嵌套路由,结果页面空白 router/index.js import Vue from 'vue' import Router from 'vue-router' ...
vue 路由嵌套（子路由跳转报错或者失效解决方法）
嵌套路由时,子路由懒加载有时会失效,最好定义引用好,再进行加载,示例结构: {path: '/shopRech',redirect:'/shopRech/shopRechHome',component ...
vue 路由嵌套注意斜杆问题
如果路由组件是一个另一个路由组件的子路由组件的话: 在配置路由规则是,path 路径,前面不能添加 /, 他代表根路径:加上他就不会拼接上父路由组件的 path 路径的,如: 演员:Ho ...
vue 路由嵌套(子路由)注意“/“斜杆问题
如果路由组件是一个另一个路由组件的子路由组件的话: 在配置路由规则是,path 路径,前面不能添加 /, 他代表根路径:加上他就不会拼接上父路由组件的 path 路径的,如: impor ...
初学者学习vue路由与无痕浏览
目录一.Vue路由二.无痕浏览一.Vue路由 ①初始SPA 1. SPA是什么单页Web应用(single page application,SPA),就是只有一个Web页面的应用, ...
Web前端开发技术课程实验报告实验3：Vue路由实验
实验代码:实验3第2题实验参考.rar-互联网文档类资源-CSDN下载 Web前端开发技术课程实验报告实验3:Vue路由实验姓名:_ __ _ ___ ___ 班级:_ _ _ ___ _ _ ...
SPA项目搭建及嵌套路由
目录上期与大家分享了什么是SPA(单页Web应用),今天来给大家分享如何使用vue-cli搭建一个SPA项目. 一.SPA项目搭建 1. 什么是vue-cli? 2.安装vue-cli 3.使用vu ...

php spa结合,vue路由嵌套SPA的实现方法

登录组件

邮箱主页面

收件箱

发件箱

php spa结合,vue路由嵌套SPA的实现方法相关推荐

最新文章

热门文章