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

一级路由: 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. Windows批处理(cmd/bat)常用命令学习

    前言 批处理文件(batch file)包含一系列 DOS命令,通常用于自动执行重复性任务.用户只需双击批处理文件便可执行任务,而无需重复输入相同指令.编写批处理文件非常简单,但难点在于确保一切按顺序 ...

  2. 在Linux系统下搭建和配置一个minio文件服务器(二)

    上一篇主要讲述了在linux系统中搭建一个minio文件服务器,那么这一篇则用来整合java代码中使用,我之前自己已经搭建好了一个springboot项目,那么这一篇将详细讲述如何把minio整合进s ...

  3. Tengine更新安装

    Tengine安装及配置 一,下载 http://tengine.taobao.org/download.html 找到下载包并且下载(Tengine-2.3.2.tar.gz) wget -c ht ...

  4. Python-组织结构-目录结构、包导入、__init__文件、模块内置变量、* 导入限制

    __pycache__ .pyc文件,中间代码,提升python运行效率 目录 分档和归类 Python项目组织结构 包 模块 类 函数.变量 # 层级依次往下都是一对多关系 Python项目目录结构 ...

  5. PageRank算法(网页排名)

    Google用它来体现网页的相关性和重要性

  6. Python练习题 020:累积累加

    [Python练习题 020] 求1+2!+3!+...+20!的和 -------------------------------------------------- 据说这题是"累积累 ...

  7. requests和正则表达式爬取猫眼电影Top100练习

    1 import requests 2 import re 3 from multiprocessing import Pool 4 from requests.exceptions import R ...

  8. mysql时间SQL

    生成随机时间 -- 带时分秒 select FROM_UNIXTIME(UNIX_TIMESTAMP('20100101000000')+ROUND(RAND()*(UNIX_TIMESTAMP()- ...

  9. shell-变量的数值运算-bc-typeset-中括号等方法介绍

    1. bc命令的用法: bc是unix下的计算器,它也可以用在命令行下面:    例:给自变量i加1 i=2 i=`echo $i + 1|bc` --------效率低     因为bc支持科学计算 ...

  10. C语言入门编程需要掌握的核心要点有哪些? 为你总结了这20个!

    摘要: C语言作为编程的入门语言,学习者如何快速掌握其核心知识点,面对茫茫书海,似乎有点迷茫.为了让各位快速地掌握C语言的知识内容,在这里对相关的知识点进行了归纳. 引言 C语言精简的语法集和标准库, ...