关于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跳转,完美解决, 特此记录,方便 ...
随机推荐
- 前端学习笔记2017.6.12 DIV布局网页
DIV的功能就是把网页划分成逻辑块的. 看下豆瓣东西页面的布局,我们来分析下. 按照先从上到下的原则,把这个页面分成几个块: 首先是最顶端的这个条,这是一个DIV,我们给它起个名字,叫banner 然 ...
- 算法Sedgewick第四版-第1章基础-010一检查括号是否成对出现
/****************************************************************************** * Compilation: javac ...
- Java-数据结构与算法-选择排序与冒泡排序
Java 选择排序与冒泡排序 1.DataSorter.java public class DataSorter { //冒泡排序法 //主要思路:按升序排序,数组元素两两比较,大的立即排后面 pub ...
- 使用Notepad++与Dev_c++编译
1. 安装Dev.打开DEV安装目录下的 D:\app\DevCpp\Dev-Cpp\MinGW64\bin(因人而异). 2.添加环境变量,测试. 将上述路径D:\app\DevCpp\Dev-Cp ...
- C++面试笔记--const、sizeof
首先来一个关于const的全面的解释,先看一波代码,之后再进行详细的分情况解释 ; const int *a=&b;//指向一个int常量的指针 int const *a=&b;//和 ...
- JDBC 配置环境
一.配置JDBC环境:先下载驱动jar包 1.配置classpath环境变量 如(E:\jdbc\mysql-connector-java-5.1.7-bin.jar) 2.数据库URL: 2.1 ...
- 在 Java 的反射中，Class.forName 和 ClassLoader 的区别
1. 解释 在java中Class.forName()和ClassLoader都可以对类进行加载.ClassLoader就是遵循双亲委派模型最终调用启动类加载器的类加载器,实现的功能是“通过一个类的全 ...
- 2018，重新开始学习DotNetCore
学习计划: 1.IdentityServer https://github.com/IdentityServer/IdentityServer4 2.eShopOnContainers https:/ ...
- 动态绑数据(Repeater控件HeaderTemplate和ItemTemplate)
前几天,Insus.NET有写了<动态绑数据(GridView控件Header和ItemTemplate)>http://www.cnblogs.com/insus/p/3303192.h ...
- 十天入门java教程 Day02
1,常量,变量的理解 常量,程序运行过程中,不能改变的,叫常量. 变量,程序运行过程中,改变的,叫变量. 2,变量的理解 变量,用来存储数据的,数据类型,存放哪种数据的种类. 变量的概念:程序运行期间 ...