Vue编写静态页面框架的基本步骤（实现基本的页面链接跳转）

第一步：定义一个整体的框架（即主页面：可以到element-ui官网-组件-container中找自己满意的）

第二步：将官网的框架拷贝到开发软件中

<template>
    <div>
        <el-container>
            <el-header>headerel-header>
            <el-container>
                <el-aside width="200px" style="background-color: rgb(238,241,246)">
                    
                    <el-menu @select="menuClick">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-user">导航一i>
                            template>
                            <el-menu-item-group>
                                <el-menu-item index="/test1">选项1el-menu-item>
                                <el-menu-item index="/test2">选项2el-menu-item>
                            el-menu-item-group>
                        el-submenu>
                    el-menu>
                el-aside>
                <el-main>
                    
                    <router-view/>
                el-main>
            el-container>
        el-container>
    div>
template>

<script>
export default {
    name: "Home",
    methods:{
        menuClick(index){
            this.$router.push(index);
        }
    }
}
script>

第三步：页面编写完成后，在index.js进行配置
1、引入对应的组件：

import Home from '../views/Home'
import Test1 from '../views/Test1'
import Test2 from "../views/Test2";

2、配置跳转组件路由。此时有两种方法：
（1）点击导航栏链接打开的页面并不在同一个页面中打开，而是浏览独自打开一个要显示的页面

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
  },
  
  {
    path: '/test1',
    name: 'Test1',
    component: Test1
  },
  {
    path: '/test2',
    name: 'Test2',
    component: Test2
  }
]

（2）在同一个页面中显示链接的内容，主要就是在对应的配置跳转组件路由中用children:[]实现

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    children:[
      {
        path: '/test1',
        name: 'Te',
        component: Test1
      },
      {
        path: '/test2',
        name: 'Test2',
        component: Test2
      }
    ]
  }
]

原因分析：
在主框架中我们有编写路由转换

                <el-main>
                    
                    <router-view/>
                el-main>

但在App.vue中我们也有的配置：

<template>
  <div id="app">

    <router-view/>
  div>
template>

所以默认情况下是执行App.vue中的