关于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跳转,完美解决, 特此记录,方便 ...
随机推荐
- 高性能MySQL笔记-第5章Indexing for High Performance-001B-Tree indexes(B+Tree)
一. 1.什么是B-Tree indexes? The general idea of a B-Tree is that all the values are stored in order, and ...
- GCD 学习（二）dispatch_queue_create创建Dispatch Queue
摘录于: http://zhuyanfeng.com/archives/3042 dispatch_queue_create 用于创建用户线程队列.可以创建Serial/Concurrent Disp ...
- map集合的应用
分析以下需求,并用代码实现: (1)利用键盘录入,输入一个字符串 (2)统计该字符串中各个字符的数量例如 用户输入字符串"If~you-want~to~change-your_fate_I_ ...
- python 根据字典中的key,value进行排序
#coding=utf-8 import requests,json,collections,base64,datetime def sort(datas): data=json.dumps(data ...
- 2015年第六届蓝桥杯省赛试题（JavaA组）
1.结果填空 (满分3分)2.结果填空 (满分5分)3.结果填空 (满分9分)4.代码填空 (满分11分)5.代码填空 (满分13分)6.结果填空 (满分17分)7.结果填空 (满分21分)8.程序设 ...
- 关于C#中的算术运算
使用中间变量交换两个int型变量的值: ; ; a = a+b; b = a-b; a = a-b; 相信大家很容易写出来,但考虑到边界值情况时会有一些有趣的事情. 我们知道有一个int.MaxVal ...
- WSMBT Modbus & WSMBS Modbus 控件及注册机
先上注册机 点击下载 How to add the WSMBT control to the toolbox: On the Tools menu, click Choose Toolbox Item ...
- Data Base 常用数据库参数的前缀表示符合
可能参数化SQL语句不同,例如在Access中参数化SQL语句是在参数直接以“?”作为参数名,在SQL Server中是参数有“@”前缀,在MySQL中是参数有“?”前缀,在Oracle中参数以“:” ...
- poj1195（二维树状数组）
题目链接:https://vjudge.net/problem/POJ-1195 题意:有s*s的矩阵,初始化为全0,有两种操作,单点修改(x,y)的值,区间查询(x,y)的值(l<=x< ...
- 关于jquery.extend()的坑：我的数组变成相同元素了？
首先呢我有一个数组,存放了多个json对象.这些json对象的属性有缺失,我设置了一个对象模板来存放默认值 先来看一段代码 var source = [ { name: 'dapianzi', bor ...