zoukankan      html  css  js  c++  java
  • 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
    复制代码

     

  • 相关阅读:
    利用 Memory Dump Diagnostic for Java (MDD4J) 分析内存管理问题
    Google开源软负载seesaw
    Commit can not be set while enrolled in a transaction
    del_cursor 批量删除游标
    java api 批量数据库操作
    eclipse invalid zip archive lib
    less,more,view一个文件时中文可以正常显示,可是VI却显示乱码呢?
    10-13 Zuul面试点之Cookie和特殊头信息处理
    10-12 Zuul面试点之Hystrix降级处理
    10-11 Zuul面试点之Hystrix整合
  • 原文地址:https://www.cnblogs.com/yangyangxxb/p/10074793.html
Copyright © 2011-2022 走看看