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

一级路由: 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. 使用binlog2sql恢复数据

    binlog2sql 是一款比较常用的数据恢复工具,可以通过它从MySQL binlog解析出你要的SQL,并根据不同选项,可以得到原始SQL.回滚SQL.去除主键的INSERT SQL等.主要用途如 ...

  2. spring的初认识

    spring的理解 1.spring是一个开源的免费框架(容器) 2.spring是一个轻量级的,非入侵式的框架 3.支持事务的处理,对框架的整合的支持 4.控制反转(ioc)和面向切口编程(aop) ...

  3. MVC设计模式-笔记1

    MVC不仅仅是一个设计模式,它应该说是一种软件开发架构模式,它包含了很多的设计模式,最为密切是以下三种模式: 1.Observer观察者模式 2.Composite组合模式 3.Strategy策略模 ...

  4. Java Web学习(八)RESTful设计

    一.RESTful设计风格 REST :指的是一组架构约束条件和原则. RESTful :满足这些约束条件和原则的应用程序或设计就是 . REST 原则 客户端和服务器之间的交互在请求之间是无状态的. ...

  5. ASP.NET Core 基于声明的访问控制到底是什么鬼?

    从ASP.NET 4.x到ASP.NET Core,内置身份验证已从基于角色的访问控制(RBAC)转变为基于声明的访问控制(CBAC). 我们常用的HttpContext.User属性ASP.NET ...

  6. XSS基础笔记 from 《Web安全攻防 渗透测试实战指南》

    XSS漏洞介绍 跨站脚本(Cross Site Scripting, 简称为XSS或跨站脚本或跨站脚本攻击)是一种针对网站应用程序的安全漏洞攻击技术,是代码注入的一种.它允许恶意用户将代码注入网页,其 ...

  7. 大数据平台Hadoop集群搭建

    一.概念 Hadoop是由java语言编写的,在分布式服务器集群上存储海量数据并运行分布式分析应用的开源框架,其核心部件是HDFS与MapReduce.HDFS是一个分布式文件系统,类似mogilef ...

  8. pytorch和tensorflow的爱恨情仇之基本数据类型

    自己一直以来都是使用的pytorch,最近打算好好的看下tensorflow,新开一个系列:pytorch和tensorflow的爱恨情仇(相爱相杀...) 无论学习什么框架或者是什么编程语言,最基础 ...

  9. SetDlgItemText()与UpdateData()的区别

    转载:https://blog.csdn.net/qq_20161893/article/details/72818874 SetDlgItemText(IDC_EDIT_RXDATA,m_strRE ...

  10. SPI应用 用SPI控制一个数字电位器

    Controlling a Digital Potentiometer Using SPI In this tutorial you will learn how to control the AD5 ...