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 ...
随机推荐
- nineoldandroids开源库
Android3.0 推出AnimationAPI ,使用起来比较方便,但是不能再3.0以下版本中使用.nineoldandroids开源库可以在任意版本上使用,官网地址:http://nineold ...
- iptables+ipset自动封闭和解封频繁访问web服务的恶意IP
转载于互联网 iptables直接针对ip进行封禁,在ip数量不大的时候是没什么问题的,但当有大量ip的时候性能会严重下降,iptables是O(N)的性能.而ipset就像一个集合,把需要封 ...
- python之json处理
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript(Standard ECMA-262 3rd Edition - Decembe ...
- 【leetcode_easy_$】577. Employee Bonus
problem 577. Employee Bonus 参考 1. Leetcode_easy_$_577. Employee Bonus; 2. https://www.cnblogs.com/li ...
- 【c# 学习笔记】使用新成员隐藏基类成员
如果想在派生类中定义与基类成员同名的成员,则可以使用new关键字把基类成员隐藏起来. 如果不适应new关键字,在派生类中定义一个与基类成员同名的成员,编译器将产生警告信息,如下代码演示: public ...
- 通过命令行给 XenServer 打补丁
安装 XenCenter 客户端,cmd 到 XenCenter 安装目录. 1.上传补丁到服务器,获得uuid xe patch-upload -s <服务器IP地址> -u root ...
- 微服务发展规划（PS 大概分层未细化到具体系统）
网关层 标准化认证业务前台 前置HTML 基于VUE的浏览器端渲染等特性,完全可以看成一个独立的层业务中台 a. 各个系统的业务功能,以业务功能为单位拆分出的业务服务. b. 配合业务前台所产生的聚合 ...
- Graphics2D画快递电子面单图片并且打印
画图类 package com.example.testpdf; import org.krysalis.barcode4j.impl.code128.Code128Bean; import org. ...
- js中实现base64加密、解密
//base64加密 解密 /* //1.加密 var result = Base.encode('125中文'); //--> "MTI15Lit5paH" //2.解密 ...
- VMware中 CentOs虚拟机的安装教程
首先点击创建新的虚拟机 选择典型安装,点击下一步 这里我们选择稍后安装操作系统,然后点击下一步 这里我们操作系统选择Linux操作系统,版本选择CentOs 7 64位,然后点击下一步 这里我们可以修 ...