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),数据发生变化,更新 ...
随机推荐
- 使用 OAS（OpenAPI标准）来描述 Web API
无论哪种类型的Web API, 都可能需要给其他开发者使用. 所以API的开发者体验是很重要的. API的开发者体验, 简写为 API DX (Developer Experience). 它包含很多 ...
- Excel大数据排查重复行内容方法，三步搞定！
首先第一步,我们找到一个空白列D输入公式“=A1&B1&C1”: 然后第二步,再选择下一空白列输入公式“=IF(COUNTIF(D:D,D1)>1,"重复", ...
- Collections中的常用方法
collections中的常用方法 public class CollectionsTest { public static void main(String[] args) { List list ...
- 代码中理解CPU结构及工作原理
一.前言 从研究生开始到工作半年,陆续在接触MCU SOC这些以CPU为核心的控制器,但由于专业的原因一直对CPU的内部结构和工作原理一知半解.今天从一篇博客中打破一直以来的盲区.特此声明,本文设计思 ...
- Vmware上安装Linux（centos7）图文教程
Vmware上安装Linux(centos7)图文教程 一.准备安装文件(vmware && centos7 镜像) 1.下载 vmware workstations :链接: ...
- Bootstrap自带的那些常用插件
1.Bootstrap自带的那些常用插件. 1.1模态框 模态框的HTML代码放置的位置 务必将模态框的HTML代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组 ...
- node--->PHPStorm 停留在 Scanning files to index..
使用webpack时,敲了npm 一些命令后,PHPStorm 开始 Scanning files to index...,去建立文件索引,但是如果一直停留在这个状态,说明是npm install 后 ...
- (.text+0x18): undefined reference to `main'
在将VS中的程序移植到ubuntu中出现的一个问题,主要原因是在vs中默认的主函数写成int _tmain(), 而在gcc编译时要找的是int main().改过来就可以了.
- 【大白话系列】MySQL 学习总结 之 初步了解 MySQL 的架构设计
一.MySQL还是个黑盒子 我们都知道,只要我们系统引入了 MySQL 驱动和连接池,就能从数据库连接池获取一个数据库连接,然后就可以执行增删改查的操作了. 可是我们并不知道 MySQL 里面是怎么执 ...
- 我学React Native开发的经历(一) 第一周学习，环境搭建及demo1,一个导航跳转页面
大家好,这是跋涉者,wadereye,说来惭愧, 我是从2017年8月25日左右开始学习React Native的,因为时间不多, 在学习的过程中,感觉资料非常零散,要趟过的坑巨多,遇到的问题也非常多 ...