[Vue]vue-router嵌套路由(子路由)
总共添加两个子路由,分别命名Collection.vue(我的收藏)和Trace.vue(我的足迹)
1、重构router/index.js的路由配置,需要使用children数组来定义子路由,具体如下:
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/Home'
import Brand from '@/Brand'
import Member from '@/Member'
import Cart from '@/Cart'
import Me from '@/Me' import Collection from '@/Collection'
import Trace from '@/Trace'
import Default from '@/Default' Vue.use(Router) export default new Router({
// mode: 'history',
// base: __dirname,
// linkActiveClass: 'active', // 更改激活状态的Class值
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/brand',
name: 'Brand',
component: Brand
},
{
path: '/member',
name: 'Member',
component: Member
},
{
path: '/cart',
name: 'Cart',
component: Cart
},
{
path: '/me',
name: 'Me',
component: Me,
children: [
{
path: 'collection',//以“/”开头的嵌套路径会被当作根路径,所以子路由上不用加“/”;在生成路由时,主路由上的path会被自动添加到子路由之前,所以子路由上的path不用在重新声明主路由上的path了。
name: 'Collection',
component: Collection
},
{
path: 'trace',
name: 'Trace',
component: Trace
}
]
}
]
})
2、Me.vue的代码如下:
<template>
<div class="me">
<div class="tabs">
<ul>
<!--<router-link :to="{name: 'Default'}" tag="li" exact>默认内容</router-link>-->
<router-link :to="{name: 'Collection'}" tag="li" >我的收藏</router-link>
<router-link :to="{name: 'Trace'}" tag="li">我的足迹</router-link>
</ul>
</div>
<div class="content">
<router-view></router-view>//<router-link> 就是定义页面中点击的部分,<router-view> 定义显示部分,就是点击后,区配的内容显示在什么地方,会被匹配到的组件替换掉
</div>
</div>
</template>
<script type="text/ecmascript-6"> </script>
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
.me{
.tabs{
& > ul, & > ul > li {
margin: 0;
padding: 0;
list-style: none;
}
& > ul{
display: flex;
border-bottom: #cccccc solid 1px;
& > li{
flex: 1;
text-align: center;
padding: 10px;
&.router-link-active {
color: #D0021B;
}
}
}
}
}
</style>
3.页面效果:
当访问到http://localhost:8080/#/me时,组件Me中<router-view>并没有渲染出任何东西,这是因为没有匹配到合适的子路由。如果需要渲染一些默认内容,需要在children中添加一个空的子路由:
{
path: '',
name: 'Default',
component: Default
},
此时浏览器的效果:默认组件Default被渲染出来了:
转自:https://blog.csdn.net/wlangmood/article/details/78269947
[Vue]vue-router嵌套路由(子路由)的更多相关文章
- 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题
一. 异常描述: 本来使用的是vue-router的hash模式,但是hash模式下url需要带“#”符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会 ...
- vue之vue-router嵌套路由
1.定义路由 routes: [ { path: '/product', //第一层路由 name: 'product', component: Vproductcontent,//父组件渲染的是子组 ...
- vue入门--简单嵌套路由的一个路径小问题
假设现在有一个项目,刚进去要显示main页面下的contorl页面,那么路由里面的初级路由应该是{main和err},这两个是同一级,然后{control和set}是main下的子路由,foot是这两 ...
- vue(19)嵌套路由
嵌套路由 有时候在路由中,主要的部分是相同的,但是下面可能是不同的.比如访问首页,里面有新闻类的/home/news,还有信息类的/home/message.这时候就需要使用到嵌套路由.项目结构如下: ...
- Vue开发之基础路由
1.router-link和router-view组件 src/App.vie文件内容: <template> <div id="app"> <div ...
- 《VueRouter爬坑第三篇》-嵌套路由
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- VueRouter爬坑第三篇-嵌套路由
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- Vue总结第五天:vue-router (使用模块化(创建Vue组件)机制编程)、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套(子路由)、路由传递数据、导航守卫)
Vue总结第五天:vue-router ✿ 路由(器)目录: □ vue中路由作用 □ vue-router基本使用 □ vue-router嵌套路由 □ vue-router参数传递 □ ...
- vue嵌套路由--params传递参数
在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另一种是值不显示在url中. 1.显示在url中index.html <d ...
- vue嵌套路由总结
嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思. 比如在vue中,我们如果不使用嵌套路由,那么只有一个<router-view>,但是如果使用,那么在一 ...
随机推荐
- javascript的正则表达式总结
网上正则表达式的教程够多了,但由于javascript的历史比较悠久,也比较古老,因此有许多特性是不支持的.我们先从最简单地说起,文章所演示的正则基本都是perl方式. 元字符 ( [ { \ ^ $ ...
- arcgis python ListEnvironments 函数可返回地理处理环境名称列表。
import arcpy environments = arcpy.ListEnvironments() # Sort the environment names environments.sort( ...
- XMind 快捷键完整命令
XMind 快捷键完整命令 快捷键(Windows) 快捷键(Mac) 描述 + + 展开当前分支 - - 收缩当前分支 * * 展开所有分支 / / 收缩所有分支 Alt+- Alt+- 显示系 ...
- React vs. Angular vs. Vue
原文连接 历史 React是一个用于构建Web应用程序UI组件的JavaScript库. React由Facebook维护,许多领先的科技品牌在其开发环境中使用React. React被Faceboo ...
- 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_17-课程预览功能开发-前后端测试
启动前端代码 前端课程找到课程的发布页面 这样就打开了预览页面 结束
- 算法习题---4-3黑白棋(UVa220)
一:题目 系统提示当前旗手W/B(白/黑)下子,例如W下子,那么W下的位置必须是夹住黑色棋子的位置才可以. 夹住方式:横向.竖向.斜向 注意落子后将夹住的黑棋吞噬变为白棋 (一)题目详解 .棋盘以数组 ...
- 启后台JOB处理单据遇到锁定问题
/用户XXX已经处理采购凭证 9000036590 DN过账失败:/已冻结临时过账:用户 XXX已冻结编号范围 /用户XXX已经处理采购凭证 9000036589 ???问题:怎么检查采购订单正在 ...
- ElasticSearch——数据建模最佳实践
如何建模 mapping 设计非常重要,需要从两个维度进行考虑: 功能:搜索.排序.聚合 性能:存储的开锁.内存的开销.搜索的性能 mapping 注意事项: 加入新字段很容易(必要时需要 updat ...
- JQ操作select项
jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Se ...
- 查看某个进程PID对应的文件句柄数量,查看某个进程当前使用的文件句柄数量
================================ 1.linux所有句柄查询 lsof -n|awk '{print $2}'|sort|uniq -c |sort -nr|more ...