vue 路由知识点(一级路由与二级路由嵌套)
本人小白一个,如果问题,麻烦大神指点,
一级路由: 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 路由知识点(一级路由与二级路由嵌套)的更多相关文章
- vue二级路由跳转后外部引入js失效问题解决方案
vue路由可以通过children嵌套,于是可以形成二级路由等等... 案例如下: routes: [ { path: '/', name: 'dy', component: dy, children ...
- Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转
今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...
- vue之二级路由
router-view : <router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件 一 样式 1 在一个vue组件,<template>& ...
- 每天一点点之vue框架开发 - vue-router路由进阶(路由别名、跳转、默认路由、二级路由、路由守卫)
路由别名 在main.js中的路由中添加name来创建别名 const routes = [ {path:'/footer',name:footerLink,component:Footer} ] ...
- Angular路由知识点
路由跳转 1. 模板方式:<ANY routerLink='/ucenter'></ANY> 2. 脚本方式: constructor(private router:Rou ...
- 链接进入react二级路由,引发的子组件二次挂载
这个问题很怪,我两个二级路由从链接进入的时候,会挂载两次子组件. 从链接进入,是因为新页面在新标签页打开的. 有子组件是因为公共组件提取 同样的操作,有一些简单的二级路由页面,就不会挂载两次. 讲道理 ...
- vue-router 二级路由
/** * Created by 我 on 2017/12/4. */ import Vue from 'vue' //import导入 Vue(自己起的名) from 从 vue import Vu ...
- nuxt二级路由
耗费了大半天的时间,终于把页面的二级路由配置好了 先看我的目录 如果没有登陆页,根本就不用考虑嵌套路由的问题,主要的menu跳转和<nuxt />可以直接写到layouts/default ...
- vue-router2.0二级路由的简单使用
1.app.vue中 <template> <div id="app"> <router-view></router-view> & ...
随机推荐
- Laravel Model查询结果的3种存储格式内存占用对比
PHP Laravel框架支持Model查询数据后可以有多种方式返回数据,对新手会造成一些困扰,比如数组Model对象.集合.纯数组 今天从内存占用的角度对比一下3种数据返回方式 按数组Model对象 ...
- Windows批处理(cmd/bat)常用命令学习
前言 批处理文件(batch file)包含一系列 DOS命令,通常用于自动执行重复性任务.用户只需双击批处理文件便可执行任务,而无需重复输入相同指令.编写批处理文件非常简单,但难点在于确保一切按顺序 ...
- JVM学习(五)对象的引用类型
一.引言 前面我们学习了JVM的垃圾回收机制,我们知道了垃圾回收是JVM的自发行为:虽然我们可以通过System.gc() 或Runtime.getRuntime().gc()进行显式调用垃圾回收 , ...
- 使用jpa的注意事项
@Transactional 事务注解 nativeQuery = true表示使用写的sql,不是HQL@Modifying 注解完成修改操作使用jap时,在实体类的类名上面加上 @Entity@T ...
- pytest封神之路第六步 断言技巧
pytest的断言把Python语言简洁的优点发挥的淋漓尽致,因为它用的就是Python的标准断言assert. assert基础 assert用法 assert_stmt ::= "ass ...
- P2652 同花顺
P2652 同花顺 Link 题目背景 所谓同花顺,就是指一些扑克牌,它们花色相同,并且数字连续. 题目描述 现在我手里有 \(n\) 张扑克牌,但它们可能并不能凑成同花顺.我现在想知道,最少更换其中 ...
- apt-get 安装软件时出现:“文件尺寸不符” 问题
报错信息 命中:1 http://packages.deepin.com/deepin panda InRelease 命中:2 http://linux.teamviewer.com/deb sta ...
- 部署Prometheus+Grafana监控
Prometheus 1.不是很友好,各种配置都手写 2.对docker和k8s监控有成熟解决方案 Prometheus(普罗米修斯) 是一个最初在SoudCloud上构建的监控系统,开源项目,拥有非 ...
- Python--网络爬虫模块requests模块之响应--response
当requests发送请求成功后,requests就会得到返回值,如果服务器响应正常,就会接收到响应数据: Response响应中的属性和方法 常用属性: status_code: 数据类型:int ...
- day01 Pyhton学习
一.python介绍 python是一种解释型.弱类型的高级编程语言. 编译型:是把源程序的每一条语言编译成机器语言,并保存成二进制文件,给计算机执行,运算速度快. 优点:程序执行效率高,可以脱离语言 ...