VUE中嵌套路由
官网地址:https://router.vuejs.org/zh-cn/essentials/nested-routes.html
路由嵌套一般使用在后台管理系统中
给一个比较简单的小案例
<!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>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
<style>
.layout {
width: 600px;
margin: 100px auto;
} .left {
width: 200px;
height: 500px;
float: left;
border: 1px solid red;
} .right {
width: 380px;
height: 500px;
float: right;
border: 1px solid green;
} .top {
height: 100px;
border: 1px solid black;
}
</style>
</head>
<script type="text/html" id="templateId">
<div class="layout">
<div class="left">左边菜单<br/><br/>
<router-link to="/menu1/login">登录组件</router-link><br/><br/>
<router-link to="/menu1/register">注册组件</router-link>
</div>
<div class="right">
<div class="top">
顶部内容
</div>
<div class="content">
<br/>
<router-view></router-view>
</div>
</div>
</div>
</script> <body>
<div id="app">
<router-link to="/menu1">菜单1</router-link>
<router-link to="/menu2">菜单2</router-link> <router-view></router-view>
</div>
</body>
<script>
//1、注册组件
const menu1 = {
template:"#templateId"
} const menu2 = {
template:'<div>我是菜单2</div>'
} const login = {
template:'<div>我是登录组件</div>'
} const register = {
template:'<div>i am register components</div>'
} //2、创建路由对象,设置路由规则
const router = new VueRouter({
routes:[
{
path:'/menu1',
component:menu1,
children:[
{path:'login',component:login},
{path:'register',component:register}
]
},
{
path:'/menu2',
component:menu2
}
]
}) new Vue({
el: "#app",
router
})
</script> </html>
VUE中嵌套路由的更多相关文章
- vue中的路由的跳转的参数
vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...
- vue中嵌套页面 iframe 标签
vue中嵌套iframe,将要嵌套的文件放在static下面: <iframe src="../../../static/bear.html" width="300 ...
- vue中嵌套页面(iframe)
vue中嵌套iframe,将要嵌套的文件放在static下面.(要将打包文件整体放在statici里,我的文件名是canvas) src可以使用相对路径,也可使用服务器根路径http:localhos ...
- vue中嵌套的iframe中控制路由的跳转及传参
在iframe引入的页面中,通过事件触发的方式进行传递参数,其中data是一个标识符的作用,在main.js中通过data进行判断,params是要传递的参数 //iframe向vue传递跳转路由的参 ...
- vue中的路由独享守卫的理解
1.vue中路由独享守卫意思就是对这个路由有一个单独的守卫,因为他的守卫方式于其他的凡是不太同 独享守卫于前置守卫使用方法大致是一样的 在路由配置的时候进行配置, { path:'/login', c ...
- vue.js嵌套路由-------由浅入深
嵌套路由就是路由里面嵌套他的子路由 子路由关键属性children 每一个子路由里面可以嵌套多个组件 子组件又有路由导航和路由容器 <router-link to="/父路由的地址名字 ...
- vue 中的路由为什么 采用 hash 路由模式,而不是href超链接模式(Hypertext,Reference)?
1. vue中路由模式的种类有两种 1. 一种是 hash 模式. 2. 一种是 h5 的 history 模式. 2. hash 和 history 都是来自 bom 对象 bom 来自 windo ...
- Vue中的路由 以及默认路由跳转
https://router.vuejs.org/ vue路由配置: 1.安装 npm install vue-router --save / cnpm install vue-router --sa ...
- vue中的路由嵌套
1定义组件 const Index = { template:` <div>首页</div> ` } const Order = { template:` <div> ...
随机推荐
- json 文件解析与应用
第一步:首先弄一个 json 文件 我这里成为 config.json 内容如下 { ": { , "desc":"中华人民共和国" }, &qu ...
- 2017-2018-1 20179203《Linux内核原理与分析》第二周作业
攥写人:李鹏举 学号:20179203 ( 原创作品转载请注明出处) ( 学习课程:<Linux内核分析>MOOC课程http://mooc.study.163.com/course/US ...
- BZOJ3033 太鼓达人
3033: 太鼓达人 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 690 Solved: 497[Submit][Status][Discuss] ...
- 安装ORACLE时在Linux上设置内核参数的含义
前两天看到一篇Redhat官方的Oracle安装文档,对于Linux内核参数的修改描述的非常清晰. 安装Oracle之前,除了检查操作系统的硬件和软件是否满足安装需要之外,一个重点就是修改内核参数,其 ...
- android开发 解析服务器端xml文件数据存储到android客户端SQLite数据库
以下面xml文件为例对其解析(假设此xml就在服务器端Server项目下的servlet包下的MenuServlet文件的输出流中): <?xml version="1.0" ...
- ruby on rails 环境搭建步骤
1.安装ruby ruby的下载页面一个版本有3样要下载的,帮助文件和安装文件.还有一个mingw. 安装时抛出make出错信息就是由于没有安装mingw引起的 到下载页http://rubyforg ...
- ng2 中使用echart
1.首先创建echarts指令 //echart.directive.ts important { Directive,ElementRef,Input,Ouput,Onchanges,OnInit, ...
- C# 判断路径和文件存在
1.判断路径是否存在,不存在则创建路径: if (!System.IO.Directory.Exists(@"D:\Export")) { System.IO.Directory. ...
- play 1.2.4的action执行前后的加载逻辑
——杂言:最近在整理这一年的笔记,打算慢慢温故一遍,然后搬到博客里头来.这篇是2013.06.18时候整理的关于action执行前后的一些载入先后顺序逻辑.我的理解可能有偏差,如果有错误的,请读者们及 ...
- CountDownLatch分析
1 什么是CountDownLatch呢? 先看看官网的定义 :一种同步帮助,允许一个或多个线程等待,直到在其他线程中执行的一组操作完成. 现在由我来解释什么是CountDownLatch吧:比如说我 ...