实现功能：制作一个登录页面，跳转到首页，首页包含菜单栏、顶部导航栏、主体，标准的后台网页格式。菜单栏点击不同菜单控制主体展示不同的组件（不同的页面）。

配置router-view嵌套跳转需要准备两个主要页面，一个由app.vue跳转的登录页面（login.vue），一个由登录页面（login.vue）跳转首页（index.vue）。另外还需要两个用于菜单跳转页面，页面内容自定义

 

我这里使用的是element-ui作为模板

前置：引入element-ui

　　在项目目录下执行命令：npm i element-ui -s

　　修改main.js，引入element组件

 

 

步骤

1. 创建登录页面（login.vue）
2. 创建后台操作页面（index.vue）
3. 配置后台操作页面菜单跳转
4. 配置嵌套路由视图路由控制菜单跳转

 

1、修改app.vue页面

app页面只要放置一个router-view标签即可，每一个路由请求默认都是从这里进去跳转

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: \'App\',
  methods: {
  }
}
</script>

<style>
</style>

 

2、创建登录页面（/views/login/login.vue）

这里的登录按钮跳转是直接跳转到主页面，当前登陆页面将完全被替换掉

登录页代码