点击链接跳转到其他组件,通常会跳转到新的页面,如果不想跳转到新页面,只在当前页面切换着显示,那么就要涉及到路由的嵌套了,也可以说是子路由的使用。
我的订单页面:mAccount.vue
<template>
<div id="main">
<div class="content clear">
<div class="account-wrapper">
<!-- 页面左侧 -->
<div class="account-sidebar">
<div class="avatar gray-box clear">
<div class="js-account-sidebar-info">
<img src="http://static.smartisanos.cn/account/asset/img/default-user-avatar.png">
</div>
<div class="box-inner">
<ul class="account-nav">
<li class="current"><a href="javascript:;">我的订单</a></li>
<li class=""><a href="javascript:;">收货地址</a></li>
</ul>
</div>
</div>
</div>
<!-- 嵌套路由 --><!-- 页面右侧 -->
<router-view></router-view>
</div>
</div>
</div>
</template>
路由配置 index.js
{
path: '/MAccount',
component: MAccount,
children:[{
path: '',
name:'MAccount',
/* 对应order页面 */
component: Order
}]
}