本人小白一个,如果问题,麻烦大神指点,

一级路由: path:'/' 默认为显示;

二级路由: path: '',默认显示为index组件,因为二级路有没有写index组件,所以使用redirect:to 去重定向

实例:

routes: [
  {
  path: '/',
  name: 'Index',
  component: Index
  },
  {
  path: '/free',
  name: 'Free',
  component: Free,
  //二级路由
  children: [
    {
    path: '',
    redirect:to=>{
      return 'free'
      }
    },
    {
    path: '/zhuanpan',
    name: 'Zhuanpan',
    component: Zhuanpan
    },
    {
    path: '/dianshang',
    name: 'Dianshang',
    component: Dianshang
    },   ]
  }

  

 咨询了一位大神,大神说子路不需要加/直接写名称就可以,大神说子路有默认显示使用redirect方法会好一点,

 

更新时间 2018年06月16日

vue 路由知识点(一级路由与二级路由嵌套)的更多相关文章

  1. vue二级路由跳转后外部引入js失效问题解决方案

    vue路由可以通过children嵌套,于是可以形成二级路由等等... 案例如下: routes: [ { path: '/', name: 'dy', component: dy, children ...

  2. Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转

    今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...

  3. vue之二级路由

    router-view : <router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件 一 样式 1 在一个vue组件,<template>& ...

  4. 每天一点点之vue框架开发 - vue-router路由进阶(路由别名、跳转、默认路由、二级路由、路由守卫)

    路由别名   在main.js中的路由中添加name来创建别名 const routes = [ {path:'/footer',name:footerLink,component:Footer} ] ...

  5. Angular路由知识点

    路由跳转 1. 模板方式:<ANY  routerLink='/ucenter'></ANY> 2. 脚本方式:  constructor(private router:Rou ...

  6. 链接进入react二级路由,引发的子组件二次挂载

    这个问题很怪,我两个二级路由从链接进入的时候,会挂载两次子组件. 从链接进入,是因为新页面在新标签页打开的. 有子组件是因为公共组件提取 同样的操作,有一些简单的二级路由页面,就不会挂载两次. 讲道理 ...

  7. vue-router 二级路由

    /** * Created by 我 on 2017/12/4. */ import Vue from 'vue' //import导入 Vue(自己起的名) from 从 vue import Vu ...

  8. nuxt二级路由

    耗费了大半天的时间,终于把页面的二级路由配置好了 先看我的目录 如果没有登陆页,根本就不用考虑嵌套路由的问题,主要的menu跳转和<nuxt />可以直接写到layouts/default ...

  9. vue-router2.0二级路由的简单使用

    1.app.vue中 <template> <div id="app"> <router-view></router-view> & ...

随机推荐

  1. lombok使用(给自己看的,只为不要忘记自己用过的技术)

    如何使用? 一.1)eclipse使用方法 1. 从项目首页下载lombok.jar 2. 双击lombok.jar, 将其安装到eclipse中(该项目需要jdk1.6+的环境) 2)idea使用方 ...

  2. Java8之日期处理

    简介 Java8除了有较大更新的 lambda. Stream ,还推出了全新的日期时间API.Java之前处理日期.日历和时间的不足之处主要有: 日期类型为可变类型,非线程安全使其应用非常受限 没有 ...

  3. python的快捷键

    常用快捷键 1.Ctrl + Enter:在下方新建行但不移动光标 2.Shift + Enter:在下方新建行并移到新行行首 3.Ctrl + /:注释(取消注释)选择的行 4.Ctrl + Alt ...

  4. 使用TiDB把自己写分库分表方案推翻了

    背景 在日益数据量增长的情况下,影响数据库的读写性能,我们一般会有分库分表的方案和使用newSql方案,newSql如TIDB.那么为什么需要使用TiDB呢?有什么情况下才用TiDB呢?解决传统分库分 ...

  5. Spring学习(二)--Spring的IOC

    1.依赖反转模式 依赖反转:高层次的模块不应该依赖于低层次的模块,两者都应该依赖于抽象接口.抽象接口不应该依赖于具体实现.而具体实现则应该依赖于抽象接口. 在面向对象编程领域中,依赖反转原则(Depe ...

  6. Python-获取等差数列

    获取等差数列思路 1. 通过range步长 2. 通过切片步长 # 通过 range series = [i for i in range(1, 101, 2)] print(series) # 通过 ...

  7. Hbuilder MUI 页面刷新及页面传值问题

    一.页面刷新问题 1.父页面A跳转到子页面B,B页面修改数据后再跳回A页面,刷新A页面数据 (1).父页面A代码 window.addEventListener("pageflowrefre ...

  8. Git多人项目开发流程演练

    1. 前言 本文利用 GitHub 平台进行一个多人项目开发流程的演练,以加深课上所学内容. 参考文献:五⼤场景玩转 Git,只要这一篇就够了! 2. 初始化项目 2.1 新建远程项目 一个多人项目通 ...

  9. 05 sublime环境配置及编译运行后输出中文乱码的解决

    编译后的乱码问题 编译后的输出:中文显示异常: 编译C出现乱码问题解决 解决思路:解决办法很简单,就是先设置文件编码为GBK格式,之后再输入中文文字,运行时的中文就不是乱码了. 首先,sublime中 ...

  10. 源码安装IVRE

    简介:IVRE(又名DRUNK)是一款开源的网络侦查框架工具,IVRE使用Nmap.Zmap进行主动网络探测.使用Bro.P0f等进行网络流量被动分析,探测结果存入数据库中,方便数据的查询.分类汇总统 ...