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 ...
随机推荐
- Java8 新特性之Stream
1.Student package com.elk.log.myTest; public class Student implements Comparable<Student> { /* ...
- 23 Flutter官方推荐的状态管理库provider的使用
加群452892873 下载对应21可文件,运行方法,建好项目,直接替换lib目录,在往pubspec.yaml添加上一下扩展. cupertino_icons: ^ flutter_swiper: ...
- 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_15-网关-路由配置
4.4 路由配置 4.4.1需求分析 Zuul网关具有代理的功能,根据请求的url转发到微服务,如下图: 客户端请求网关/api/learning,通过路由转发到/learning 客户端请求网关/a ...
- 【425】堆排序方法（二叉堆）优先队列（PQ）
参考:漫画:什么是二叉堆? 大根堆 小根堆 参考:漫画:什么是堆排序? 参考:漫画:什么是优先队列? 参考:[video]视频--第14周10--第8章排序10--8.4选择排序3--堆排序2--堆调 ...
- MHA集群搭建
(1).简介 MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Facebook公司)开 ...
- SpringMVC+Ajax实现文件批量上传和下载功能实例代码
需求: 文件批量上传,支持断点续传. 文件批量下载,支持断点续传. 使用JS能够实现批量下载,能够提供接口从指定url中下载文件并保存在本地指定路径中. 服务器不需要打包. 支持大文件断点下载.比如下 ...
- （十八）JDBC优化使用（一）
一.将增删改方法合并,优化代码 第十七篇的UserPOImpl.java类代码可以进行优化,因为增删改方法用的都是同一种执行方法executeUpdate(),对十七篇的例子进行优化如下: 2.1 搭 ...
- 微信服务号一些记录，与DTCMS微信功能二次开发
1.首先必须获得Token CRMComm crm = new CRMComm(); string error = ""; string ...
- LVS负载均衡在Ubuntu环境下部署详解
一.本地环境介绍: 负载均衡的三台机器均为Ubuntu Server 14.04 64位系统,内核中已集成ipvs模块( modprobe -l | grep ipvs 查看 ).为演示LVS负载均衡 ...
- Egret入门学习日记 --- 第十六篇（书中 6.10~7.3节 内容）
第十六篇(书中 6.10~7.3节 内容) 昨天搞定了6.9节,今天就从6.10节开始. 其实这个蛮简单的. 这是程序员模式. 这是设计师模式. 至此,6.10节 完毕. 开始 6.11节. 有点没营 ...