关于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跳转,完美解决, 特此记录,方便 ...
随机推荐
- 算法Sedgewick第四版-第1章基础-1.4 Analysis of Algorithms-007按位置，找出数组相关最大值
Given an array a[] of N real numbers, design a linear-time algorithm to find the maximum value of a[ ...
- 解决.jsp及静态资源文件访问404的问题
我们在做Web项目时,经常将.jsp文件放到webapp\WEB-INF下,这时,我们访问jsp等文件的时候,就会报404. 如果是纯前后端分离的项目,后端只返回数据,不处理页面,也没问题.但,有时我 ...
- Java50道经典习题-程序29 求矩阵对角线之和
题目:求一个3*3矩阵对角线元素之和分析:利用双重for循环控制输入二维数组,再将a[i][i]累加后输出. 例如:下面矩阵的对角线之和为24 1 4 6 2 5 3 9 7 8 public cla ...
- 关于UI Automation框架
微软提供的UI Automation框架给开发windows平台的自动化测试带来了很大的便利,这里就总结一下相关的代码. 首先,直接使用UI Automation框架,完成一个NotePad的abou ...
- DjVu转PDG的方法与步骤
作者:马健邮箱:stronghorse_mj@hotmail.com发布:2008.08.03更新:2008.08.24 补充说明:此文成文较早,当时PDG浏览器只支持纯正PDG,不支持名为PDG,实 ...
- c语言判断是否是utf8字符串，计算字符个数
#include <stdio.h> #include <string.h> #include <stdlib.h> /********************** ...
- spring mvc常用注解标签
@Controller 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model , ...
- 自定义等高 Cell
1.介绍 1.1 代码自定义 cell(使用 frame) 创建一个继承自 UITableViewCell 的子类,比如 BookCell1. 在 initWithStyle:reuseIdentif ...
- timestamp 在curl中变成了Xtamp
目前的解决方案 将timestemp放在数组最前面. [注意:请求的参数中需要将timestamp这个参数放在数组的最前面,不然在GET方式请求中,会出现浏览器将它变成Xtamp,最终导致签名失败]
- js判断页面从何种浏览器打开
问题 有时项目需要根据不同的设备进行不同的处理,需要判断到底是哪种设备打开了项目. 移动端浏览器检测 移动终端浏览器版本信息: var browser = { versions: function ( ...