本页主要学习：axios的路由跳转功能，父页面和子页面的结合

1.html代码的编写：

2.script的代码编写：

3.路由的配置，父页面为父路径，子页面为子路径（代码有完整版本的三步法）

 

(1) html，script完整代码：

<template>
  <!-- 商品管理首页 -->
<div style="display:flex;">
  <!-- display:flex是让包含着的div盒子不换行，vw 百分之xx屏幕 -->
    <div style="width:10vw">后台管理系统</div>
    <div style="width:20vw">
      <!-- <div @click="gotoUserManager">用户管理</div>
      <div @click="gotoGoodsManager">商品管理</div>-->
      <div v-for="(nav,index) in navs" :key="'nav-'+index" @click="gotoNav(nav.url)">{{nav.name}}</div>
    </div>
    <!-- 1.把跳转界面写成数组，v-for=""是循环输出的数组，这样就不用一条一条的打了  -->
    <!-- 2:key="'nav-'+index" 是告诉机器我是有前缀循环程序，
      防止循环重复，不然机器会以为和其他的循环一样，防止报错 -->
    <!-- 3. @click="gotoNav(nav.url)，下面用到axios传url，跳转路由"-->
    <div style="width:70vw">
      <router-view></router-view>
      <!-- 显示其他页面的内容 -->
    </div>
  </div>

</template>

<script>
//  import common from "../../common/common";
export default {
  data() {
    return {
      navs: [
//以后要加新的路径 就直接在这里加省去下面一堆的麻烦，可以自动循环出现
        { name: "用户管理", url: "/main/User_manager" },
        { name: "商品管理", url: "/main/Goods_manager" },
        { name: "商品分类", url: "/main/Goods_classify" }
      ]
    };
  },
//写一个判断是否登录 没有登录 就跳转到登录页面
  created() {
    if (!this.common.isLogin) {
      // this.common.isLogin定义了全局变量，定义为false，！是相反，所以就为正的时候才跳转到登陆页面
       this.$router.push("/login");
      //  this.$router.push() 可以通过修改url实现路由跳转。
    }
  },
 
  methods: {
//gotoNav 的方法参数获取vue里面的navs
    gotoNav(url) {
      this.$router.push(url);
      // this.$router.push() 可以通过修改url实现路由跳转。
      // 点击接收到url之后就进行路由页面的跳转
    }
   }
};
//  下面是另外一种方式 和HTML注释掉的是一起的
    // gotoUserManager() {
    //   this.$router.push("/admin_main/admin_User_Manager");
    // },
    // gotoGoodsManager() {
    //   this.$router.push("/admin_main/admin_Goods_Manager");
    // }

</script>

<style>

</style>

 (2)定义一个全局的变量，来方便判断用户是否登陆

1.创建common文件夹，再创建common.js文件，然后写以下内容

var data = {
 
    // 记录是否登录 
    isLogin: false,
    // 记录用户的token
    token: "",
 
}
// Save the global
 
export default data;

（3）在router.js文件里创建，父子路由的配置（包含路由创建三步法）

import admin_main from "../manage/admin_main"
import admin_GoodsMange from "../manage/admin_GoodsMange"//1.创建独立文件，引入路径
import test from "../manage/test"

//2.创建路径，具体的路径位置
const router = [
    

    { path: "/admin_login", component: admin_login },
    { path: "/admin_regist", component: admin_regist },

    {
        path: "/admin_main", component: admin_main, children:
            [
                { path: "/admin_GoodsMange", component: admin_GoodsMange },

            ]
    },
]

//3.引入路由器
export default router;