完整版: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如何在路由里面定义一个子路由的更多相关文章

  1. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

  2. react router @4 和 vue路由 详解(一)vue路由基础和使用

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...

  3. react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...

  4. angular路由详解四(子路由)

    子路由是相对路由 路由配置部分: 主要是children const routes: Routes = [ {path:'home', component: HomeComponent, childr ...

  5. react router @4 和 vue路由 详解(全)

    react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...

  6. react router @4 和 vue路由 详解(三)react如何在路由里面定义一个子路由

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 5.react如何在路由里面定义一个子路由?   a.引入在需要子路由的页面引入Rout ...

  7. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

  8. vue技术栈进阶(02.路由详解—基础)

    路由详解(一)--基础: 1)router-link和router-view组件 2)路由配置 3)JS操作路由

  9. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

随机推荐

  1. mysql 5.7.18 winx64安装配置方法

    在mysql-5.7.18-winx64文件夹下新建my.ini文件 [mysql] # 设置mysql客户端默认字符集 default-character-set=utf8 [mysqld] #设置 ...

  2. Android AndFix修复方式的限制

    这里阅览了很多网上关于修复的资料,一一贴在这里便于查看: https://github.com/alibaba/AndFix  这是官方处  要了解使用,一定得看看这里. http://www.jia ...

  3. python Django 项目创建

    注:后续如不特色说明,使用python版本均为python3 创建项目 django-admin startproject projectName 启动服务 python manage.py runs ...

  4. webpack踩坑之路 (2)——图片的路径与打包

    刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle).下面我们就来分析下在webpack项目中图片的应用场景. ...

  5. Angular 学习笔记 ( timezone + moment + material date-picker + date pipe + asp.net core )

    参考 : https://stackoverflow.com/questions/29979609/time-conversion-with-timezoneinfo-for-past-years h ...

  6. 优雅地记录Python程序日志2:模块组件化日志记录器

    本文摘自:https://zhuanlan.zhihu.com/p/32043593 本篇将会涉及: logging的各个模块化组件 构建一个组件化的日志器 logging的模块组件化 在上一篇文章中 ...

  7. (9)进程---JoinableQueue队列

    消费者模型-->存和取得过程 和Queue队列区别:解决了Queue队列拿取完,程序阻塞不能自动关闭(依靠放入None来解决)的问题--->参见上个例子 put 存入, get 获取 q. ...

  8. 【debug、info、warn、error】四者之间的区别与用法

    debug:需要在调试过程中输出的信息,但发布后是不需要的(当然发布后,也是看不到的) info:需要持续输出的信息(无论调试还是发布状态) warn:警告级别的信息(不严重) error:错误信息( ...

  9. You Don't Know JS: Scope & Closures (第一章:什么是Scope)

    Content What is Scope? Lexical Scope Function Vs. Block Scope Hoisting Scope Closures Appendix: Dyna ...

  10. catalan 递推

    http://www.cnblogs.com/zyt1253679098/p/9190217.html