vue路由--嵌套路由
静态嵌套路由：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<router-link to="/green">green</router-link>
<router-link to="/fruit">fruit</router-link>
<router-view></router-view>
</div>
<template id="green">
<div>蔬菜
<router-link to="/green/organic">有机</router-link>
<router-link to="/green/inorganic">无机</router-link>
<router-view></router-view>
</div>
</template>
<template id="fruit">
<div>水果
<router-link to="/fruit/sweet">甜的</router-link>
<router-link to="/fruit/acid">酸的</router-link>
<router-view></router-view>
</div>
</template>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//父路由 有蔬菜，水果，蔬菜里面有有机蔬菜，无机蔬菜 ，水果里面有甜的酸的
let green={template:'#green'}
let organic={template:"<div>有机蔬菜organic</div>"}
let inorganic={template:"<div>无机蔬菜inorganic</div>"}
let fruit={template:'#fruit'}
let sweet={template:"<div>甜的</div>"}
let acid={template:"<div>酸的</div>"}
//路由路径映射表
let routes=[
//路由默认去的第一个组件
{
path:'',
component:green
},
{
path:"/green",
component:green,
children:[
{
path:"",
component:organic
},
{
path:"organic",
component:organic
},
{
path:"inorganic",
component:inorganic
}
]
},
{
path:"/fruit",
component:fruit,
children:[
{
path:"",
component:sweet
},
{
path:"sweet",
component:sweet
},
{
path:"acid",
component:acid
}
] },
//所有没有找到时候，去地址/green的组件
{
path:"*",
redirect:'/green'
} ]
//实例化一个路由
let router=new VueRouter({
routes
})
let vm=new Vue({
el:"#app",
data:{
},
router
})
</script>
</html>
嵌套路由要通过子路由的方式实现，如果改成以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<router-link to="/green">green</router-link>
<router-link to="/fruit">fruit</router-link>
<router-view></router-view>
</div>
<template id="green">
<div>蔬菜
<router-link to="/green/organic">有机</router-link>
<router-link to="/green/inorganic">无机</router-link>
<router-view></router-view>
</div>
</template>
<template id="fruit">
<div>水果
<router-link to="/sweet">甜的</router-link>
<router-link to="/acid">酸的</router-link>
<router-view></router-view>
</div>
</template>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//父路由 有蔬菜，水果，蔬菜里面有有机蔬菜，无机蔬菜 ，水果里面有甜的酸的
let green={template:'#green'}
let organic={template:"<div>有机蔬菜organic</div>"}
let inorganic={template:"<div>无机蔬菜inorganic</div>"}
let fruit={template:'#fruit'}
let sweet={template:"<div>甜的</div>"}
let acid={template:"<div>酸的</div>"}
//路由路径映射表
let routes=[
//路由默认去的第一个组件
{
path:'',
component:green
},
{
path:"/green",
component:green,
children:[
{
path:"",
component:organic
},
{
path:"organic",
component:organic
},
{
path:"inorganic",
component:inorganic
}
]
},
{
path:"/fruit",
component:fruit },
{
path:"/sweet",
component:sweet },
{
path:"/acid",
component:acid },
//所有没有找到时候，去地址/green的组件
{
path:"*",
redirect:'/green'
} ]
//实例化一个路由
let router=new VueRouter({
routes
})
let vm=new Vue({
el:"#app",
data:{
},
router
})
</script>
</html>
首先没法用类似/fruit/sweet的路由跳转
用/sweet这样的路由，会把模板渲染到第一个router-view里
把fruit里的两种类型变成动态参数（接收任意水果类型作为动态参数）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<router-link to="/green">green</router-link>
<router-link to="/fruit">fruit</router-link>
<router-view></router-view>
</div>
<template id="green">
<div>蔬菜
<router-link to="/green/organic">有机</router-link>
<router-link to="/green/inorganic">无机</router-link>
<router-view></router-view>
</div>
</template>
<template id="fruit">
<div>水果
<router-link to="/fruit/sweet">甜的</router-link>
<router-link to="/fruit/acid">酸的</router-link>
<router-view></router-view>
</div>
</template>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//父路由 有蔬菜，水果，蔬菜里面有有机蔬菜，无机蔬菜 ，水果里面有甜的酸的
let green={template:'#green'}
let organic={template:"<div>有机蔬菜organic</div>"}
let inorganic={template:"<div>无机蔬菜inorganic</div>"}
let fruit={template:'#fruit'}
let fruittype ={template:"<div>{{ $route.params.type }}</div>"}
//let sweet={template:"<div>甜的</div>"}
//let acid={template:"<div>酸的</div>"}
//路由路径映射表
let routes=[
//路由默认去的第一个组件
{
path:'',
component:green
},
{
path:"/green",
component:green,
children:[
{
path:"",
component:organic
},
{
path:"organic",
component:organic
},
{
path:"inorganic",
component:inorganic
}
]
},
{
path:"/fruit",
component:fruit,
children:[
{
path: '/',
redirect: 'sweet'
},
{
path:":type",
component:fruittype
} ] },
//所有没有找到时候，去地址/green的组件
{
path:"*",
redirect:'/green'
} ]
//实例化一个路由
let router=new VueRouter({
routes
})
let vm=new Vue({
el:"#app",
data:{
},
router
})
</script>
</html>
redirect实现默认参数，或跳转到默认页面，解决进入页面不点链接时无组件挂载的问题
vue路由--嵌套路由的更多相关文章
- VUE中嵌套路由
官网地址:https://router.vuejs.org/zh-cn/essentials/nested-routes.html 路由嵌套一般使用在后台管理系统中 给一个比较简单的小案例 <! ...
- vue.js嵌套路由-------由浅入深
嵌套路由就是路由里面嵌套他的子路由 子路由关键属性children 每一个子路由里面可以嵌套多个组件 子组件又有路由导航和路由容器 <router-link to="/父路由的地址名字 ...
- [Vue]vue-router嵌套路由(子路由)
总共添加两个子路由,分别命名Collection.vue(我的收藏)和Trace.vue(我的足迹) 1.重构router/index.js的路由配置,需要使用children数组来定义子路由,具体如 ...
- vue 路由缓存 路由嵌套 路由守卫 监听物理返回
最近开发vue项目,遇到的一些问题,这里整合一下,看到一些博客已经有写相关知识,然后自己再次记录一下. 这是关于vue路由相关比较常见的问题,以后遇到相关路由的问题,会不断更新这篇博客. 需求1:从填 ...
- vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同
import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...
- 06 Vue路由简介,原理,实现及嵌套路由,动态路由
路由概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路 ...
- Vue-Router路由 Vue-CLI脚手架和模块化开发 之 路由常用配置与路由嵌套
vue-router路由常用配置 1.mode:配置路由模式,默认为hash,由于URL很丑,可以修改为history,但是需要服务端的支持: 以上一篇的博文为实例: 初始时url的显示: 使用mod ...
- Vue(基础六)_嵌套路由（续）
一.前言 1.路由嵌套里面的公共路由 2.keep-alive路由缓存 3.导航守卫 二.主要内容 ...
- VUE温习：nextTick、$refs、嵌套路由、keep-alive缓存、is特性、路由属性用法、路由钩子函数
一.$nextTick 1.vue的dom执行异步更新,只要观察到数据变化,vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变. 2.vue.$nextTick(cb),数据发生变化,更新 ...
随机推荐
- 前端笔记6-js2
1.break 和continue用法 break结束本次循环,如果想结束外层循环,可以通过这个label来指定要结束的循环. continue可以用来跳过当次循环,如果想跳过外次循环,也可以通过这个 ...
- git查看远程仓库和本地的区别
git diff 你可以用 git diff 来比较项目中任意两个版本的差异. $ git diff master..test 上面这条命令只显示两个分支间的差异,如果你想找出 master , te ...
- Python工具类（二）—— 操作时间相关
#!/usr/bin/env python # -*- coding: utf-8 -*- """ __title__ = '操作时间的工具类' "" ...
- C++符合类型：指针和引用
1. 引用(左值引用) 引用为对象起了另外一个名字,引用类型引用另外一种类型. int ival = 1024; int &refval = ival; //refval指向ival(是iva ...
- centos7的新特性
1.修改主机名方式改变 centos6在/etc/ centos7使用命令hostnamectl set-hostname 主机名2.修改时间方式改变3.查看IP地址ifconfig不再支持改用ip4 ...
- c#移位运算符（"<<"及">>"）
C#是用<<(左移) 和 >>(右移) 运算符是用来执行移位运算. 左移 (<<) 将第一个操作数向左移动第二个操作数指定的位数,空出的位置补0. 左移相当于乘. ...
- Dubbo如何支持本地调用？injvm方式解析
Dubbo是一个远程调用的框架,对于一个服务提供者,暴露了一个接口供外部消费者调用,那么对于提供者自己是否可以调用这个接口,需要什么特殊处理吗? 这篇文章就分享下Dubbo关于本地调用的实现机制,以及 ...
- 【阿里云IoT+YF3300】12.阿里云IoT Studio入门介绍
阿里云IoT Studio是针对物联网场景提供的生产力工具,可覆盖各个物联网行业核心应用场景,帮助您高效经济地完成设备.服务及应用开发.物联网开发服务提供了移动可视化开发.Web可视化开发.服务开发与 ...
- MySQL 清理缓存—flush tablesFlush tables的影响
摘自:http://blog.chinaunix.net/uid-31401119-id-5781305.html 1 Flush tables简介 官方手册中关于Flush tables的介绍, ...
- 理解和运用Java中的Lambda
前提 回想一下,JDK8是2014年发布正式版的,到现在为(2020-02-08)止已经过去了5年多.JDK8引入的两个比较强大的新特性是Lambda表达式(下文的Lambda特指JDK提供的Lamb ...