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

一级路由: 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. JMETER并发压测-自定义不同请求参数

    背景 虽然可以请求相同的接口做测试,但是请求参数每次都是相同的.为了模拟不同的用户,请求不同的参数,所以要自定义参数来做多线程并发压力测试. 点赞再看,关注公众号:[地藏思维]给大家分享互联网场景设计 ...

  2. RabbitMQ小记(三)

    1.RabbitMQ中mandatory和immediate以及备份交换机 (1)mandatory为true时,若交换机无法根据自身类型和路由键找到符合条件的对列,那么RabbitMQ会回调Basi ...

  3. Sass 教程

    什么是Sass 什么是css预处理语言 css预处理语言可以理解为: 开发一种特殊的编程语言, 把css文件作为编译否的结果, 我们在这个编程语言三增加了很多程序的特性, 使开发变得的更加简单 当前流 ...

  4. Linux安装软件方法总结

    相比于windows系统,Linux安装程序就比较复杂了,很多需要root用户才能安装.常见的有以下几种安装方法 源码安装 rpm包安装 yum安装 (RedHat.CentOS) apt-get安装 ...

  5. CSP-J 2019复赛分析

    [CSP-J 2019 ]复赛分析 前言(????) 总的来说,这次复赛感觉考的很不满意,至于原因,感慨万分!关键是:期中考试了!偏偏是这个时候! - 由于我是一个初二的蒟蒻,所以考试前先定了一个目标 ...

  6. 【代码审计】PHP代码审计---基础记录

    PHP伪协议 PHP伪协议事实上是其支持的协议与封装协议,支持的种类有以下12种. * file:// - 访问本地文件系统 * http:// - 访问 HTTP(s) 网址 * ftp:// - ...

  7. 简单区间dp

    题目链接 对于基本区间dp,设dp[l][r]是区间l到r的最大价值. 我们可以枚举区间的长度,在枚举左端点,判断即可. 当右端点大于n,就break. dp[l][r]=max(dp[l+1][r] ...

  8. IDEA2020.2的破解

    第一种方式:http://code.39sd.cn/ 直接获取二维码: 第二种:下载破解工具(本方法只是提供个人学习使用) 1.下载2020.2的idea 链接:https://pan.baidu.c ...

  9. Python 导入模块的两种方法:import xxx 和from...import xxx

    import 方式导入模块 import tool.getsum.add # 导入模块,优先会从启动文件的当前目录开始寻找 # 如果找到,就使用 # 如果找不到,会在系统模块存放目录去 tool.ge ...

  10. 多测师讲解自动化测试 _RFalert弹框._高级讲师肖sir

    alert弹框定位 Open Browser file:///D:\\bao\\baoan\\alert弹框.html gc sleep 2 Handle Alert accept #点击确定 Han ...