vue-router多级路由

【一】相关API

• 指的是：this.$router--->方法
• 常用的:
  • this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
  • this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
  • this.$router.back(): 请求(返回)上一个记录路由
  • this.$router.go(-1): 请求(返回)上一个记录路由
  • this.$router.go(1): 请求下一个记录路由

【二】多级路由

【1】多级路由配置

• router/index.js

children: [
      {
        path: '/index',
        name: 'index',
        component: index
      },
      {
        path: '/order',
        name: 'order',
        component: order
      },
      {
        path: '/goods',
        name: 'goods',
        component: goods
      }
    ]

【2】主页面

<template>
  <div class="backend">
    <div class="left">
      <router-link to="/index"><p>首页</p></router-link>
      <router-link to="/order"><p>订单管理</p></router-link>
      <router-link to="/goods"><p>商品管理</p></router-link>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>