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
    复制代码

     

  • 相关阅读:
    oracle 同义词
    Git分支操作
    [转]Hibernate状态 (merge,attachDirty,attachClean)
    [转]对jQuery的事件绑定的一些思考
    [转]为什么用Spring来管理Hibernate?
    [转]spring注入静态bean
    ajax 请求调用问题
    Java常用开发组件介绍
    Spring @Value SpEl 知识点小记
    radio中最佳解决方案
  • 原文地址:https://www.cnblogs.com/yangyangxxb/p/10074793.html
Copyright © 2011-2022 走看看