vue路由嵌套的SPA实现步骤

作者：匿名的girl 时间：2024-04-28 09:20:04　

本文为大家分享了路由嵌套的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>

来源：http://www.cnblogs.com/wangruifang/p/7776934.html

标签：vue,路由嵌套

投稿

vue路由嵌套的SPA实现步骤

猜你喜欢

MySQL中create table as 与like的区别分析

python 列表套json字典根据相同的key筛选数据

tensorflow将图片保存为tfrecord和tfrecord的读取方式

微信跳一跳辅助python代码实现

发布你的Python模块详解

Vue 中使用 typescript的方法详解

Python OpenCV处理图像之图像直方图和反向投影

Django中使用group_by的方法

python开启摄像头以及深度学习实现目标检测方法

python 实现logging动态变更输出日志文件名

ASP获取刚插入记录的自动编号ID

NLTK的安装教程及安装错误解决方案

ASP 三层架构 Error处理类

设计稿标注首屏线的确定始末

php实现生成验证码实例分享

卸载VS2011 Developer Preview后Sql Server2008 R2建立数据库关系图报“找不到指定的模块”错误的解决方法

python直接访问私有属性的简单方法

mysql数据库删除重复数据只保留一条方法实例

对python numpy.array插入一行或一列的方法详解

Python+matplotlib绘制饼图和堆叠图