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),数据发生变化,更新 ...
随机推荐
- 如何选择kmeans中的k值——肘部法则–Elbow Method和轮廓系数–Silhouette Coefficient
肘部法则–Elbow Method 我们知道k-means是以最小化样本与质点平方误差作为目标函数,将每个簇的质点与簇内样本点的平方距离误差和称为畸变程度(distortions),那么,对于一个簇, ...
- Linux下Tomcat,mysql安装包及教程整合，
前段时间孔老师给了一个虚拟机,自己瞎捣鼓,装了Tomcat和mysql,捣鼓了好几天,把一些安装包和试过还不错的博客整理出来: 老师给的已经装好了Linux系统和JDK. Tomcat9安装包 ...
- Docker windows nano server容器中安装ssh实现远程登录管理
[问题] 使用ServiceMonitor.exe作为前台进程运行起来的容器无法attach. 无法远程连接到运行中的容器中进行管理. [解决方法] 在container中新建管理员用户,通过SSH实 ...
- .net core 不是开源的么 作为菜 不能贡献源码 只有 欣赏额
step one 去download一份 与前辈在一起
- .NET Core Install for Ubuntu 14.04
Add the dotnet apt-get feed In order to install .NET Core on Ubuntu or Linux Mint, you need to fir ...
- 基于Bootstrap和Knockout.js的ASP.NET MVC开发实战 关于 拦截器的 学习 部分
先贴一段: 下面贴代码: 上面这段代码呢,有几个点迷糊.可以找找看
- SpringBoot_Web开发_定制错误数据
SpringBoot默认的错误处理机制 默认效果: 1).浏览器,返回一个默认的错误页面 2).如果是其他客户端,默认响应一个json数据 原理: 可以参照ErrorMvcAutoConfig ...
- python读取文件使用相对路径的方法
场景描述: python传统的读取文件的方法,通过读取文件所在目录来读取文件,这样出现的问题是,如果文件变更了存储路径,那么就会读取失败导致报错 如下方脚本 def stepb(a):#写入txt f ...
- django1.11版本在python3.7中运行还有点兼容性问题.
django1.11版本在python3.7中运行还有点兼容性问题. 出现SyntaxError: Generator expression must be parenthesized这个报错 找到这 ...
- mui html5 plus
mui: mod:框架 mhe:头文件 mbody:内容 mta:底部 msl:轮播图 mg:九宫格 ml:图文列表 mu.post : ajax dga: 绑定事件 mui.toast :来实 ...