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 ...
随机推荐
- SurfaceView双缓冲技术引入
package com.loaderman.customviewdemo; import android.content.Context; import android.graphics.Canvas ...
- springboot之docker化
1.Docker安装 本人是centos7系统,安装也是按照官方文档进行安装.https://docs.docker.com/install/linux/docker-ce/centos/ ,即 1. ...
- win10下安装Kafka
去kafka官网(http://kafka.apache.org/downloads.html)下最新包(目前是2.3.0),不分操作系统,直接点二进制压缩包链接跳过去下载即可 -> 解压到你指 ...
- Build Telemetry for Distributed Services之OpenCensus：Tracing2（待续）
part 1:Tracing1 Sampling Sampling Samplers Global sampler Per span sampler Rules References
- 【417】一条语句编译并执行C语言
参考:shell学习笔记(1)Linux下在一行执行多条命令 要实现在一行执行多条Linux命令,分三种情况: 1.&& 举例: lpr /tmp/t2 && rm / ...
- Python - Django - 作者表多对多关联书籍表
models.py 代码: from django.db import models # Create your models here. # 出版社 class Publisher(models.M ...
- windows大全
1.win7系统如何显示隐藏的文件 参考连接:https://jingyan.baidu.com/article/da1091fbc6c7d2027849d628.htm ...
- 【Leetcode_easy】645. Set Mismatch
problem 645. Set Mismatch 题意: solution1: 统计每个数字出现的次数了,然后再遍历次数数组,如果某个数字出现了两次就是重复数,如果出现了0次,就是缺失数. 注意:如 ...
- iOS-tabBar切换不同控制器封装（自定义导航+自定义uiviewcontroler+系统自带tabbar+自定义tabbarController）
首先,一个app的搭建环境非常重要.既要实现基本功能,又要考虑后期优化的性能. 现在很多应用不仅仅是系统自带的控制器,由于需求复杂,基本上需要自定义多控制器来管理. 新建一个BasicNavigati ...
- maven:清除lastUpdated文件
项目使用maven管理jar包,很容易因为各种原因(网速慢.断网)导致jar包下载不下来,出现很多.lastUpdated文件.这些文件一个一个删除太麻烦.下面是全部删除的方法 windows系统 c ...