关于vue路由嵌套遇到的坑~
关键在于子路由中的path问题，path之前不要放/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/vue-2.4.0.js"></script>
<script src="lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-view></router-view>
</div>
<template id="temp">
<div>
<h1>只是登录组件</h1>
<router-link to="/login/male">男注册</router-link>
<router-link to="/login/female">女注册</router-link>
<router-view></router-view>
</div>
</template>
<script>
let login = {
template: '#temp',
data() {
return {
msg: '123'
}
}
};
let malereg = {
template: `<h2>这是男人注册的组件</h2>`
};
let femalereg = {
template: `<h2>这是nv人注册的组件</h2>`
};
let register = {
template: `<h1>这是一个注册组件</h1>`,
data() {
return {
msg: '123'
}
}
};
let router = new VueRouter({
routes: [
{
path: '/login',
component: login,
children: [
{path: 'male', component: malereg}, // 这个path后面千万不要放 /
{path: 'female', component: femalereg},
]
},
]
});
let vm = new Vue({
el: '#app',
data: {},
methods: {},
router
})
</script>
</body>
</html>
- 这篇文章写的有点随意，晚上少吃个鸡腿
关于vue路由嵌套遇到的坑~的更多相关文章
- Vue路由嵌套
Vue路由嵌套 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- vue 路由嵌套 及 router-view vue-router --》children
vue 路由嵌套 vue-router -->children 在项目的很多子页面中,我们往往需要在同一个页面做一个组件的切换,同时保存这个页面的部分数据(比如树形菜单),进而显示不同的数据 ...
- vue 路由嵌套高亮问题
正常路由嵌套是没有问题的,但是如果你已经在当前主路由页面了,然后再次点击主路由就会出现页面数据空白的情况 看代码: //主路由通过v-for循环出来 <div class="list- ...
- vue教程3-06 vue路由嵌套(多层路由)，路由其他信息
多层嵌套: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Vue路由嵌套和命名视图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue路由--嵌套路由
静态嵌套路由: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- Vue路由history模式踩坑记录：nginx配置解决404问题
问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使 ...
- vue路由嵌套，vue動態路由
https://www.cnblogs.com/null11/p/7486735.html https://www.cnblogs.com/goloving/p/9271501.html https: ...
- vue路由机制导致的坑，坑，坑
实现一个手机定位的功能: 跳转到指定页面的时候,安卓手机地图定位正常,苹果手机第一次进入页面,地图定位不准, 要刷新后,才可以准确定位,后来无意间不用路由跳转,使用JS跳转,完美解决, 特此记录,方便 ...
随机推荐
- 20、Basic Shell_for_while_grep_find
转载:https://github.com/swcarpentry/DEPRECATED-boot-camps/blob/master/shell/shell_cheatsheet.md 1.For ...
- Luogu 2322 [HNOI2006]最短母串问题
唔,太菜了,弄了好几个小时. 状压dp,设$f_{s, i}$表示选了集合$s$,以$i$结尾的最短长度,设$g_{i, j}$表示串$i$的后缀和串$j$的前缀的最长匹配长度. $f_{s, i} ...
- Entity Framework Tutorial Basics（26）：Add Entity Graph
Add Entity Graph using DbContext: Adding entity graph with all new entities is a simple task. We can ...
- Clos Network
1952年,Charles Clos 设计出了一种多级的交换架构,用多级的小型交换机阵列来构建一张大的无阻塞的网络.在此之前,要实现“无阻塞的架构”,只能采用NxN的Cross-bar方式. 而Clo ...
- SLAM(Linux版)
之前的那个是Windows版,现在终于发现Windows运行slam是不行的,多么痛的领悟. 本书系统地介绍了视觉SLAM所需的基本知识与核心算法,既包括数学理论基础,如三维空间的刚体运动.非线性优化 ...
- 关注java技术相关公众号
1.江南一点雨 关注公众号,回复 Java ,获取 Java干货! 个人博客:http://www.javaboy.org/ 2. 芋道源码 github地址:https://github.com/Y ...
- 校对双层PDF中的隐藏文本
作者:马健邮箱:stronghorse_mj@hotmail.com发布:2012.06.11 目录一.背景二.能够校对的PDF需要满足的条件三.校对工具的选择四.校对过程五.延伸讨论 事先声明:本文 ...
- Java 在本地开发环境部署多个 spring 项目
修改Tomcat 的 server.xml 文件 路径:C:\JAVA\apache_tomcat_8.5.11\conf\server.xml : 每个web项目的端口号不同,且存储的目录相同但是文 ...
- .NET 图片转base64
//图片 转为 base64编码的文本 private string ImgToBase64String(string Imagefilename) { try { Bitmap bmp = new ...
- ubuntu - 14.04，如何让从托盘消失的输入法图标再次显示出来？
ubuntu14.04,我也不知道怎么搞的,突然输入法图标就从托盘上消失了,这可真太不方便了,不知道自己当前是否正在使用输入法,怎么能让输入法图标再次显示在托盘上? 解决办法:确保你的“系统设置”中有 ...