关于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跳转,完美解决, 特此记录,方便 ...
随机推荐
- PCL—关键点检测（Harris）低层次点云处理
博客转载自:http://www.cnblogs.com/ironstark/p/5064848.html 除去NARF这种和特征检测联系比较紧密的方法外,一般来说特征检测都会对曲率变化比较剧烈的点更 ...
- NSButton添加事件
-(void)addButton { NSButton* pushButton = [[NSButton alloc] initWithFrame: NSMakeRect(, , , )]; push ...
- Bulma 源码解析之 .container 类
Bulma 的 .container 类是这样实现的. .container position: relative // 不设置桌面以下设备的 container +desktop margin: 0 ...
- java.io.FileNotFoundException: res/drawable/title_bar_shadow.9.png
ERROR/AndroidRuntime(803): Caused by: java.io.FileNotFoundException: res/drawable/title_bar_shadow.9 ...
- C# System.Timers.Timer定时器的使用和定时自动清理内存应用
项目比较大有时候会比较卡,虽然有GC自动清理机制,但是还是有不尽人意的地方.所以尝试在项目启动文件中,手动写了一个定时器,定时清理内存,加快项目运行速度. public class Program { ...
- 禁用GridView控件前5行记录
禁用GridView控件前5行记录. 应该在GridView控件写OnRowDataBound事件: 如果你只想禁用删除铵钮的话: 网页运行效果: 如果你想把整行禁用的话,可以这样写: 运行效果: 禁 ...
- 手把手教你如何制作和使用lib和dll_转载
目录 静态库 什么是静态库? 怎么创建 如何使用 静态库的第一种使用方法 静态库的第二种使用方法 动态链接库 动态库是什么? 怎么创建 如何使用 隐式调用 显式调用 静态库什么是静态库?我们先来说一下 ...
- java基础之语法和开发规则
一. 代码书写的规则 以下面为例: 先写好结构 注意:为了避免错误,写代码时先把括号打齐,然后再补内容,每个”{}”里的内容开始写时要相比上一行多8个空格.为了方便可以用键盘上的 键代替(一般情况下时 ...
- 洛谷P4137 Rmq Problem / mex（莫队）
题目描述 有一个长度为n的数组{a1,a2,…,an}.m次询问,每次询问一个区间内最小没有出现过的自然数. 输入输出格式 输入格式: 第一行n,m. 第二行为n个数. 从第三行开始,每行一个询问l, ...
- luogu4088 [USACO18FEB]Slingshot
link 这题在线得写树套树,所以我写的离线+树状数组 对于每个询问,Ans=\(\max_{j=1}^n{|a_j-x_i|+|b_j-y_i|+t_i}\) 拆成四种情况 \(x_i\le a_j ...