react router @4 和 vue路由 详解(四)vue如何在路由里面定义一个子路由
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html
6、vue如何在路由里面定义一个子路由?
给父路由加一个 children:[]
参考我的<1.d>的代码

const routes = [
{ //path是路由的路径 path:'/', //redirect代表重定向,因为当前路径'/'并没有对应的组件,所以需要重定向到其他路由页面
redirect:'/ho'
},
{
path: '/ho',
redirect:'/ho/home', //当不需要重定向的时候,需要component写上当前路由对应的组件页面 component: Home, //有些路由还有子路由,需要用到children[],
//当访问的时候,<router-link>的属性to的时候要把所有的父组件都带上
//如:此处的/ho/home/like children: [ //子路由写在children数组里,仍旧以对象的形式 {
name: 'home',
path: 'home',
component: Home1,
redirect:'/ho/home/like',
children :[
{
name: 'like',
path: 'like',
component: Like
},
{
name: '2000001',
path: '2000001',
component: S1
},
{
name: '2000022',
path: '2000022',
component: S2
}
]
},
{
name: 'type',
path: 'type',
component: Type
},
{
name: 'need',
path: 'need',
component: Need
},
{
name: 'find',
path: 'find',
component: Find
},
{
name: 'mine',
path: 'mine',
component: Mine
}
]
},
{
name: 'search',
path: '/search',
component: Search
},
{
name: 'position',
path: '/position',
component: Position0
},
{
name: 'publish',
path: '/publish',
component: Publish
},
{
name: 'success',
path: '/success',
component: Success
},
{
name: 'listall',
path: '/listall',
component: Listall
},
{
name: 'listone',
path: '/listone',
component: Listone
},
{
name: 'listchange',
path: '/listchange',
component: Listchange
},
{
name: 'map',
path: '/map',
component: Map
}
] const router = new VueRouter({ //此处设置mode为history,即不带#号,在处理数据的时候会更方便一些
mode: 'history', //ES6的写法,即routes:routes的简写,当key和value名字一样时,可简写 routes
}) //把你创建的路由暴露出去,使得main.js可以将其引入并使用 export default router

react router @4 和 vue路由 详解(四)vue如何在路由里面定义一个子路由的更多相关文章
- react router @4 和 vue路由 详解(八)vue路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...
- react router @4 和 vue路由 详解(一)vue路由基础和使用
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...
- react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...
- angular路由详解四(子路由)
子路由是相对路由 路由配置部分: 主要是children const routes: Routes = [ {path:'home', component: HomeComponent, childr ...
- react router @4 和 vue路由 详解(全)
react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...
- react router @4 和 vue路由 详解(三)react如何在路由里面定义一个子路由
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 5.react如何在路由里面定义一个子路由? a.引入在需要子路由的页面引入Rout ...
- Vue 路由详解
Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...
- vue技术栈进阶(02.路由详解—基础)
路由详解(一)--基础: 1)router-link和router-view组件 2)路由配置 3)JS操作路由
- 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
随机推荐
- Total Commander
Total Commander 是一款应用于 Windows 平台的文件管理器 ,它包含两个并排的窗口,这种设计可以让用户方便地对不同位置的“文件或文件夹”进行操作,例如复制.移动.删除.比较等,相对 ...
- 第 8 章 容器网络 - 054 - 准备 macvlan 环境
准备 macvlan 环境 macvlan 本身是 linux kernel 模块,其功能是允许在同一个物理网卡上配置多个 MAC 地址,即多个 interface,每个 interface 可以配置 ...
- 日常英语---十四、Dolce & Gabbana cancels China show amid 'racist' ad controversy(adj.温柔的,prep.在其中)
日常英语---十四.Dolce & Gabbana cancels China show amid 'racist' ad controversy(adj.温柔的,prep.在其中) 一.总结 ...
- 通过cookies跳过验证码登陆页面,直接访问网站的其它URL
我每次手动访问去NN网的一家酒店,就不需要登陆,一旦我用脚本打开就会让我登陆,而登陆页面又有验证码,不想识别验证码,所以就想:“通过cookies跳过验证码登陆页面,直接访问网站的其它URL” 转 ...
- 让 Ubuntu 16 开机自动启动 Vino Server
Vino Server 有一个问题, 如果用户没有login , 它是不会启动的. 但是,我把帐号设置从自动启动之后,Vino Server还是没有启动. 看来自动启动跟输密码启动还是有差别的. 具体 ...
- java.lang.RuntimeException: com.netflix.client.ClientException: Load balancer does not have available server for client: service-one
一.异常信息 java.lang.RuntimeException: com.netflix.client.ClientException: Load balancer does not have a ...
- 蓝鲸DevOps深度解析系列(1):蓝盾平台总览
关注嘉为科技,获取运维新知 2018年10月,嘉为科技与腾讯云.蓝鲸智云携手,在北京.上海.广州.深圳举办 “研运一体,数据驱动,让运维走向运营”为主题的分享会,来自金融.电力.能源.制造等行业的 ...
- DPDK 16.04/16.11.2 默认tx offload是关闭的引起tx vlan offload无效
打开IXGBE调试日志发发现:tx使用ixgbe_xmit_pkts_vec,默认tx offload无效了PMD: ixgbe_set_tx_function(): Using simple tx ...
- 【洛谷p1507】NASA的食物计划
(一次a……) NASA的食物计划[传送门] 好的上算法标签: 嗯这是个二维背包 (万年不变分隔线) 二维的题就是在一维基础上增加了一个条件,这个背包不仅含有质量还有体积.所以我们增加一层循环.核心算 ...
- python-django rest framework框架之解析器
1.解析器 : 对请求的数据进行解析 - 请求体进行解析. 解析器在你不拿请求体数据时 不会调用. class UsersView(APIView): def get(self,request,*ar ...