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

一级路由: 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. RabbitMQ安装、集群搭建、概念解析

    RabbitMQ安装.集群搭建.概念解析 基本概念 为什么会产生MQ 1.解耦:采用异步方式实现业务需求达到解耦的目的. 2.缓冲流量,削峰填谷: 问:为什么会有流量冲击? 答:采用"直接调 ...

  2. 用 Java 做个“你画手机猜”的小游戏

    本文适合有 Java 基础的人群 作者:DJL-Lanking HelloGitHub 推出的<讲解开源项目>系列.有幸邀请到了亚马逊 + Apache 的工程师:Lanking( htt ...

  3. zabbix_server.conf配置文件参数

    NodeID: 在amster-child 的分布式架构中,这个ID是唯一标识zabbix node的号码 ListenPort:Trapper 类型Item监听的端口, SourceIP: 在连接其 ...

  4. JavaScript,你好!

    初识JavaScript 概述 JavaScript是一门世界上最流行的脚本语言 ECMAScript它可以理解为是javaScript的一个标准 而且现在最新的版本已经到es6版本 但是大部分浏览器 ...

  5. 智能卡加密芯片SMEC90ST

    深圳市中巨伟业信息科技有限公司 最新推出一款单价低,安全性高的智能卡安全芯片,产品型号为:SMEC90ST,采用32-bit ARM SC100 SecureCore Processor 安全内核处理 ...

  6. Python练习题 049:Project Euler 022:姓名分值

    本题来自 Project Euler 第22题:https://projecteuler.net/problem=22 ''' Project Euler: Problem 22: Names sco ...

  7. Java知识系统回顾整理01基础04操作符04位操作符

    一.位操作符 位操作符在实际工作中用的并不常见,但是我比较纠结这些位操作.所以实际练习位操作符的每一个操作符的操作实例来理解其具体含义. 建议: 如果确实感兴趣,就看看,个人建议跳过这个章节. 真正工 ...

  8. C++中_T()和L的区别

    转载:https://blog.csdn.net/amusi1994/article/details/53898960 前言 本文旨在介绍于VC++常见的两个类型:_T()和L   概念 字符串前面加 ...

  9. python在一个画布上画多个子图

    转载:https://blog.csdn.net/qq_26449287/article/details/103022636 matplotlib 是可以组合许多的小图, 放在一张大图里面显示的. 使 ...

  10. matlab进行FIR滤波器设计(一)

    来源:https://blog.csdn.net/leokingszx/article/details/80041910 在实际的应用中,有时需要使用FIR根据完成一些特定功能,比如近似一阶RC低通电 ...