Vue路由嵌套
Vue路由嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>嵌套路由</title>
</head>
<body>
<div id="app"> </div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
Vue.use(VueRouter);
// 声明组件路由
var Son1={
template:`
<h1>我是子组件1</h1>
`
};
var Son2={
template:`
<h1>我是子组件2</h1>
`
}; // 创建路由对象
var Home={
template:`
<div>
首页内容
<br />
<router-link to='/home/son1'>组件1</router-link>
<router-link to='/home/son2'>组件2</router-link>
<router-view></router-view>
</div>
`
}; // 命名路由
var router=new VueRouter({
// 配置路由对
routes:[
// 路由匹配规则
{
// 动态路由参数，以冒号开头
path:'/home',
name:'home',
// 响应组件
component:Home,
// 路由嵌套
children:[
{
//以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;在生成路由时，
主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path。
path:'son1',
component:Son1
},
{
path:'son2',
component:Son2
}
]
}
] }); var App={
template:`
<div>
<!--router-link默认会被渲染成a标签，to默认会被渲染成href属性-->
<router-link :to = "{name:'home'}">首页</router-link> <!--路由组件的出口-->
<router-view></router-view>
</div>
`
};
new Vue({
el:'#app',
template:`<App />`,
router:router,
components:{
App
}
}) </script>
Vue路由嵌套的更多相关文章
- 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路由嵌套，vue動態路由
https://www.cnblogs.com/null11/p/7486735.html https://www.cnblogs.com/goloving/p/9271501.html https: ...
- 关于vue路由嵌套遇到的坑~
关键在于子路由中的path问题,path之前不要放/ <!DOCTYPE html> <html lang="en"> <head> <m ...
- vue路由嵌套，对应展示的视图
- vue学习路由嵌套
1. 路由嵌套和参数传递 传参的两种形式: a.查询字符串:login?name=tom&pwd=123 {{$route.query}} ------ <li><route ...
随机推荐
- spring的事务是什么？与数据库的事务是否一样
spring的事务是什么?与数据库的事务是否一样 先说一下什么是事务,事务:是对数据库的一些列操作. 之前一直觉得事务只针对于数据库当中,5种隔离级别,7种传播行为,后来才发现这是针对Spring的, ...
- MERN——MongoDB && React && Node && Express
原文链接:Let’s build a full stack MongoDB, React, Node and Express (MERN) app github源码地址:jelorivera08/re ...
- PAT 甲级1057 Stack (30 分)（不会，树状数组+二分）*****
1057 Stack (30 分) Stack is one of the most fundamental data structures, which is based on the prin ...
- ubuntu 17.04 Tomcat安装
安装Tomcat分为两步: JDK和Tomcat 安装jdk 1.在oralce官网下载jdk
- Java使用Apache Commons Exec运行本地命令行命令
首先在pom.xml中添加Apache Commons Exec的Maven坐标: <!-- https://mvnrepository.com/artifact/org.apache.comm ...
- Ubuntu构建LVS+Keepalived高可用负载均衡集群【生产环境部署】
1.环境说明: 系统版本:Ubuntu 14.04 LVS1物理IP:14.17.64.2 初始接管VIP:14.17.64.13 LVS2物理IP:14.17.64.3 初始接管VIP:14 ...
- Redis HashMap 使用
散列类型相当于Java中的HashMap,他的值是一个字典,保存很多key,value对,每对key,value的值个键都是字符串类型,换句话说,散列类型不能嵌套其他数据类型.一个散列类型键最多可以包 ...
- springboot与redis
该项目已上传至GitHub:https://github.com/xiaostudy/springboot_redis 用到的框架技术有:springboot.mybatis.shiro.redis ...
- Java面试 - final、finally、finalize的区别？
final:用于声明属性, 方法和类,分别表示属性不可变.方法不可覆盖.被其修饰的类不可继承. finally:异常处理语句结构的一部分,表示总是执行. finalize:Object 类的一个方法, ...
- [转帖]详解JVM内存布局及GC原理，值得收藏
概述 https://www.toutiao.com/i6731345429574713868/ java发展历史上出现过很多垃圾回收器,各有各的适应场景,不仅仅是开发,作为运维也需要对这方面有一定的 ...