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

     

  • 相关阅读:
    HTML5 Canvas Overview
    HTML5 Canvas Tutorial
    CSS Inheritance
    Get Foreign Keys
    Spring + JdbcTemplate + JdbcDaoSupport examples
    Spring + JDBC example
    Get Primary Key Column From A Table
    python学习第19天之目录规范和常用模块之time
    python学习的第十八天模块之包、相对搜索路径和绝对搜索路径
    python学习的第十七天 模块、内置函数
  • 原文地址:https://www.cnblogs.com/yangyangxxb/p/10074793.html
Copyright © 2011-2022 走看看