VUE框架

Vue前端框架

一、Vue框架的概述

​ Vue 是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其他大型框架不同的是，Vue被设计为考科一自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router — 跳转 vue-resource — 通信 vuex — 管理）或既有项目整合

​ 官网：https://cn.vuejs.org/v2/guide/

二、前端知识体系

• Soc：HTML + CSS + JS : 视图
• 网络通信：axios
• 页面跳转：vue-router
• 状态管理：vuex
• Vue-UI ：

2.1、前端三要素

• HTML（结构）：超文本标语言（Hyper Text Markup Language），决定网页的结构和内容
• CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式
• JavaScript（行为）：是一种弱类型脚本语言其源代码不许经过编译，而是由浏览器解释运行，用于控制网页的行为

2.1.1、结构层（HTML）

内容过于简单 ---- 略

2.1.2、表现层（CSS）

​ CSS 层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下：

• 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器
• 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；

​ 这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为【CSS预处理器】的工具，提供 CSS 确实的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率

CSS预处理器

​ CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行Web页面样式设计，在通过编译器转化为正常的CSS文件，以供项目使用”。

常用的CSS预处理器有哪些：

• SASS：基于Ruby，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS
• LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低与SASS。但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用LESS

2.1.4、行为层（JavaScript）

​ JavaScript一门弱类型脚本语言，其源代码在发往客户端运行值钱不需要经过编译，而是将文本格式的字符代码发送给浏览器有浏览器解释运行。

​ Native 原生 JS 开发

​ 原生 JS 开发，也就是让我们按照 [ECMAScript] 标准的开发方式，简称是 ES，特点是所有浏览器都支持。

​ TypeScript 微软的标准

​ TypeScript 是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。由安德斯·海尔斯伯格（C#、Delphi、TypeScript 之父 ：.NET 创立者）主导。

2.2、JavaScript框架

• jQuery：简化了DOM操作，缺点是DOM操作太频繁，影响前端性能；在前端眼里使用他仅仅是为了兼容IE6、7、8；
• Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript 语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如：1代 -> 2代 ，除了名字，基本就是两个东西；）
• React：Facebook出品，一款高性能的JS前端框架；特点是提出了新概念【虚拟DOM】用于减少真是DOM操作，在内存只能过模拟DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，需要额外学习一门【JSX】语言；
• Vue：一款渐进式JavaScript框架，所谓渐进式就死逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular（模块化）和React（虚拟DOM）的优点；
• Axios：前端通信框架：因为Vue的边界很明确，就是为了处理DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以选择使用jQuery提供的额Ajax通信功能。

2.3、前端UI框架

• Ant-Design：阿里巴巴出品，基于React的UI框架
• ElementUI、iview、ice：饿了么出品，基于Vue的UI框架
• BootStrap：Twitter退出的一个由前端开发的开源工具包
• AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架

2.4、前端构建工具

• Bable：JS编译工具，主要用于浏览器不支持的 ES 新特性，比如用于编译TypeScript

• WebPack：模块打包器，主要作用是打包、压缩、合并以及按序加载

  注：以上知识点已将 WebApp 开发所需技能全部梳理

2.5、三端的统一

2.5.1、混合开发（Hybrid App）

​ 主要目的是实现一套代码三端统一（PC、Android：.apk、IOS：.ipa）并能够调用到设备底层硬件（如：传感器、GPS、摄像头等），打包方式主要有以下两种：

• 云打包：HBuild -> HBuildX，DCloud出品；API Cloud
• 本地打包：Cordova（前身是 PhoneGap）

2.5.2 微信小程序

​ 详见微信官网，这里就是介绍一个方便微信小程序UI开发框架：WeUI

2.6、后端技术

​ 前端人员为了方便开发也需要掌握一定的后端技术，但我们Java后台人员指导后台知识体系极其庞大复杂，所以为了方便前端人员开发后台应用，就出现了NodeJS这样的技术。

​ NodeJS的作者已经声称放弃NodeJS（说是架构做的不好再加上笨重的 node_modules ，可能让作者不爽了吧），开始开发全新架构的Deno

​ 既然是后台技术，那可你当需要框架和项目管理工具，NodeJS框架及项目管理工具如下：

• Express：NodeJS框架
• Koa：Express简化版
• NPM：项目综合管理工具，类似于Maven
• YARN：NPM的替代方案，类似于Maven和Gradle的关系

2.7、主流前端框架

Vue.js

2.7.1、IView

​ iview 是一个强大的基于Vue的UI库，有很多实用级基础组件比 elementui 的组件更丰富，主要服务于 PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发，支持ES2015高质量、功能丰富 友好的 API，自由灵活的使用空间

• 官网地址
• Github
• iview-admin

备注：属于前端主流框架，选型时可以考虑使用，主要特点是移动端支持比较多

2.7.2、ElementUI

​ Element 是饿了么前端开源维护 Vue UI 组件库，组件齐全，基本涵盖后天所需的所有组件，文档讲解详细，例子也很丰富。主要用于开发 PC 端的页面，是一个质量比较高的 Vue UI 组件库。

• 官网地址
• Github
• vue-element-admin

备注：属于前端主流框架，选型时可考虑使用，主要特点是桌面端支持较多

2.7.3、ICE UI

​ 飞冰是阿里巴巴团队基于 React/Angular/Vue 的中后台应用解决方案，在阿里巴巴内部，已经有270多个来自几乎所有BU的项目在使用。飞冰包含了一条从设计端到开发端的完整链路，帮助用户快速搭建属于自己的后台应用。

• 官网地址
• Github

备注：主要组件还是React为主，戒指2019年02月17日更新博客前对Vue的支持还不完善，目前尚处于官网阶段

2.7.4、Vant UI

​ *Vant UI 是有赞前端团队基于有赞同意的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件、通过 Vant，可快速搭建出风格统一的页面，提升开发效率。

• 官网地址
• Github

2.7.5、AtUI框架

​ at-ui 是一款基于 Vue 2.x 的前端UI组件库，主要用于快速开发 PC 网站产品，他提供了一套 npm + webpack + babel前端开发工作流程，CSS样式独立，即使采用不同的框架实现都能保持统一的 UI 风格。

• 官网地址
• Github

2.7.6、CubeUI

​ cube-ui 是滴滴团队开发的基于Vue.js 实现的精致移动端组件库。支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。

• 官网地址
• Github

2.8、混合程序开发

2.8.1、Flutter

​ Flutter是谷歌的移动端UI框架，可以极端的时间内构件Android和IOS上高质量的原生级应用。Flutter可与现有代码一起工作，他被世界各地的开发者和组织使用。并且Flutter是免费和开源的。

• 官网地址
• Github

备注：Google 出品，主要特点是快速构建原生APP应用程序，如做混合应用该框架为必选框架

2.8.2 lonic

​ lonic既是一个CSS框架也是一个JavaScript UI库，lonic是目前最有潜力的一款HTML5手机应用开发框架。通过SASS构建应用程序，他提供了很多UI组件来帮助开发者开发强大的应用。它使用JavaScript MVVM框架和Angular/Vue来增强应用。提供数据的双向绑定，使用它称为Web和移动开发者的共同选择

• 官网地址
• 官网文档
• Github

2.9、微信小程序

2.9.1、mpvue

​ mpvue 是美团开发的一个使用Vue.js开发小程序的前端框架，目的支持 微信小程序、百度智能小程序，头条小程序 和 支付宝小程序。框架基于Vue.js，修改了运行时框架 runtime 和代码编译器 compiler 实现，使其可运行在小程序环境中，从而为小程序开发引入 Vue.js开发体验

• 官网地址
• Github

备注：完备的Vue开发体验，并且支持多平台的小程序开发，推荐使用

2.9.2、WeUI 框架

​ WeUI是一套同微信原生视觉体验一直的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加同意。包含button、cell、dialog、toast、article、icon等格式元素。

• 官网地址
• Github

三、Vue语法

v-bind

用v-bind绑定元素特性

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>
<!-- view层 -->
<div id="app">
  {{massage}}

  <span v-bind:title="message">
    鼠标悬停可查看动态绑定的提示信息
  </span>

</div>

<!-- 1、导入Vue.js -->
<script src="https://lib.baomitu.com/vue/2.5.21/vue.min.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "hello vue"
    }
  })
</script>
</body>
</html>

​ v-bind 等被称为指令。指令带有前缀 v-，以表示他们是Vue提供的特殊特性。他会在渲染的DOM上应用特殊的响应式行为。在这里，该指令意思为：“将这个元素节点的title特性和Vue实例的message属性保持一致”。

​ 如果你再次打开浏览器的JavaScript控制台，输入app.message=‘新消息’，则会看到title更新

v-if，v-else，v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1 v-if="type == 'A'">优秀</h1>
    <h1 v-else-if="type == 'B'">良好</h1>
    <h1 v-else>及格</h1>
</div>

<script src="https://lib.baomitu.com/vue/2.5.21/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            type:'A'
        }
    })
</script>
</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <li v-for="(item,index) in items">
    {{item.message}} --- {{index}}
  </li>
  <li v-for="item in intems">
    {{item.message}}
  </li>
</div>

<script src="https://lib.baomitu.com/vue/2.5.21/vue.min.js"></script>
<script>
  var vm = new Vue({
    el:"#app",
    data:{
      items:[
        {message:'html'},
        {message: 'css'},
        {message: 'javascript'}
      ]
    }
  })
</script>
</body>
</html>

事件绑定 v-on

<div id="app">
    <button v-on:click="sayHi">click me</button>
</div>

<script src="https://lib.baomitu.com/vue/2.5.21/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message: "hello,Vue!"
        },
        methods:{
            sayHi: function (){
                alert(this.message)
            }
        }
    })
</script>

Vue双向绑定 v-model

<div id="app">
  输入的文本：<input type="text" v-model="massage">
  <p>文本：{{massage}}</p>


  单选框：
  <input type="radio" name="sex" value="男" v-model="sex"> 男
  <input type="radio" name="sex" value="女" v-model="sex"> 女

  <p>选中：{{sex}}</p>

  下拉框：
  <select v-model="sel">
    <option value="" disabled>--请选择--</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>

  <p>下拉框选项：{{sel}}</p>

  复选框：
  <input type="checkbox" id="唱" value="唱" v-model="hobbis"> 唱
  <input type="checkbox" id="跳" value="跳" v-model="hobbis"> 跳
  <input type="checkbox" id="Rap" value="Rap" v-model="hobbis"> Rap
  <input type="checkbox" id="篮球" value="篮球" v-model="hobbis"> 篮球

  <p>{{hobbis}}</p>
</div>

<script src="https://lib.baomitu.com/vue/2.5.21/vue.min.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      massage:"123",
      sex:'',
      sel:'',
      hobbis:[]
    }
  })
</script>

Vue 自定义组件

<div id="app">
<!--  v-bind ---》 组件绑定-->
  <chen v-for="item in items" v-bind:item="item"></chen>
</div>

<script src="https://lib.baomitu.com/vue/2.5.21/vue.min.js"></script>
<script>

  // 定义一个Vue组件
  Vue.component("chen",{
    //组件接受参数
    props:['item'],

    //自定义标签
    template: '<li>{{item}}</li>'
  });

  var vm = new Vue({
    //元素绑定
    el: "#app",
    //参数设置
    data: {
      items:["Java","Linux","JavaScript","Python"]
    }
  })
</script>

Axios网络通信

​ Axios 是一个开源的可以用在浏览器和 Nodejs 的异步通信框架，她的主要作用是实现Ajax异步通信，其功能特点如下：

• 从浏览器中创建XMLHttpRequests
• 从node.js 创建http请求
• 支持Promise API[JS中链式编程]
• 拦截请求和响应
• 转换请求数据和相应数据
• 取消请求
• 自动转换Json数据
• 客户端支持防御XSRF（跨站请求伪造）

中文文档：http://www.axios-js.com

Github: http://github.com/axios/axios

<div id="app" v-clock>
  <div>{{info.name}}</div>
  <div>{{info.address.street}}</div>
  <a v-bind:href="info.url">点我</a>
</div>

<script src="https://lib.baomitu.com/vue/2.5.21/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el:"#app",
    data(){
      return{
        //请求的返回参数合适，必须和json字符串一样
        info:{
          name: null,
          address:{
            street: null,
            city: null,
            country: null
          }
        }
      }
    },
    mounted(){//钩子函数 链式编程        ES6 特性
      axios.get('data.json').then(response => (this.info = response.data))
    }
  })
</script>

Vue 计算属性、内容分发、自定义事件

计算属性

计算属性的重点突出在属性两个字上(属性是名词)，首先他是个特性其次这个属性有计算的能力，这里的计算就是个函数；简单的来说，他就是一个能够将计算结果缓存进来的属性（将行转化为静态的属性），可理解为缓存

<div id="app">
    <p>currentTime1 {{currentTime1()}}</p>
    <p>currentTime2 {{currentTime2}}</p>
</div>

<script src="https://lib.baomitu.com/vue/2.5.21/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello Vue"
        },
        methods: {
            currentTime1: function (){
                return Date.now();//返回一个时间戳
            }
        },
        computed: { //计算属性： methods，computed 方法名重名，只会调用methods中的方法
            currentTime2: function (){
                this.message;
                return Date.now();//返回一个时间戳
            }
        }
    })
</script>

说明：

• methods：定义方法，调用方法使用currentTime1()，需要带括号
• computed：定义计算属性，调用属性使用currentTime2，不需要带括号；this.message是为了能够让currentTime2观察到数据变化而变化
• 如果在方法中的值发生了变化，则缓存就会刷新！

结论：

​ 调用方法时，每次都需要进行计算，既然有计算过程必定产生系统开销，那如果这个结果是不经常变化的？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约系统开销

内容分发

​ 在Vue.js中我们使用元素作为承载分发内容的出口，即插槽，可以应用在组合组件的场景中；

<div id="app">
  <todo>
    <todo-title slot="todo-title" :title="title"></todo-title>
    <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
  </todo>
</div>

<script src="https://lib.baomitu.com/vue/2.5.21/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">

  //slot:插槽
  Vue.component("todo",{
    template:
            '<div>' +
            '<slot name="todo-title"></slot>' +
            '<ul>' +
            '<slot name="todo-items"></slot>' +
            '</ul>' +
            '</div>'
  })

  Vue.component("todo-title",{
    props: ['title'],
    template: '<div>{{title}}</div>'
  })

  Vue.component("todo-items",{
    props: ['item'],
    template: '<li>{{item}}</li>'
  })

  var vm = new Vue({
    el:"#app",
    data:{
      title:"编程语言",
      todoItems: ['Java','JavaScript','Go','Nodejs','Python']
    }
  })
</script>

自定义事件

<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>

<!--        绑定index 和 item 同时创建自定义事件与Vue对象中的事件进行绑定-->
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>

<script src="https://lib.baomitu.com/vue/2.5.21/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">

    //slot:插槽
    Vue.component("todo",{
        template:
            '<div>' +
            //定义插槽 并绑定组件
            '<slot name="todo-title"></slot>' +
            '<ul>' +
            '<slot name="todo-items"></slot>' +
            '</ul>' +
            '</div>'
    })

    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    })

    Vue.component("todo-items",{
        //调用组件 同时获取index
        props: ['item','index'],
        //只能绑定当前组件的方法
        template: '<li>{{item}}<button @click="remove">删除</button></li>',
        methods: {
            //将index通过标签传递到vue对象中实现删除操作
            remove: function (index) {
                this.$emit('remove',index);
                alert("删除成功")
            }
        }
    })

    var vm = new Vue({
        el:"#app",
        data:{
            title:"编程语言",
            todoItems: ['Java','JavaScript','Go','Nodejs','Python']
        },
        methods: {
            removeItems: function (index) {
                this.todoItems.splice(index,1);//一次删除一个元素
            }
        }
    })
</script>

四、Vue-cli

​ vue-cli 是官方提供的一个脚手架，用于快速生成一个Vue的项目模板

​ 主要功能：

• 统一的目录结构
• 本地调试
• 热部署
• 单元测试
• 继承打包上线

五、WebPack

​ 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundle），当 webpack 处理应用程序是，他会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

​ webpack 是当下最热门的前端资源模块化管理和打包工具，他可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载模块进行代码分离，等到时机需要再一步加载。通过 loader 转换，任何形式的资源都可以当做模块，比如：CommonsJS、AMD、ES6、JSON、CoffeeScript、LESS等；

	### 1、安装Webpack

​ WebPack是一款模块加载器兼打包工具，他能把各种资源，如：JS，JSX，ES6，SASS，LESS，图片等都作为模块来处理和使用。

安装

npm install webpack -g
npm install webpack-cli -g

​ 测试安装成功：

• webpack -v
• webpack-cli -v

配置

创建webpack.config.js 配置文件

• entry：入口文件，指定WebPack用哪个文件作为项目入口
• output：输出，指定WebPack把处理完成的文件放置到指定路径
• module：模块，用于处理各种类型的文件
• plugins：插件，如：热更新、代码重用等
• resolve：设置路径指向
• watch：监听，用于设置文件改动后直接打包

module.exports = {
    entry: "",
    output: {
    	path: "",
        filename: ""
    },
    module：{
    	loaders：[
    		{test: /\.js$/,loader: ""}
    	]
    },
    plugins:{},
    resolve:{},
    watch: true
}

使用webpack

1. 创建项目

2. 创建一个名为modules的目录用于放置JS模块等资源文件

3. 在modules下创建模块文件，如 hello.js，用于编写JS模块相关的代码

   //暴露一个方法
   exports.sayHi = function () {
       document.write("<h1>小陈学Vue</h1>")
   };
   

4. 在modules下创建一个名为main.js的入口文件，用于打包时设置 entry 属性

   var hello = require("./hello");
   hello.sayHi();
   

5. 在项目目录下创建webpack.config.js配置文件，使用webpack命令打包

   module.exports = {
       entry: "./webpack-study/main.js",
       output: {
           filename: "./js/bundle.js"
       }
   }
   

6. 在项目目录下创建HTML页面，如 index.html，导入WebPack打包后的JS文件

7. 在IDEA控制台中直接执行webpack；如果失败的话，就使用管理员权限运行即可

# 参数 --watch 用于监听变化
webpack --watch

六、Vue：vue-router路由

1、说明

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含功能如下：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的CSS class的链接
• HTML5 历史模式或hash模式，在IE9中自动降级
• 自定义的滚动条行为

2、安装

​ 基于第一个vue-cli进行测试学习；先查看node_modules中是否存在vue-router

​ vue-router是一个插件包，所以我们还是需要用npm/cnpm来进行安装的。打开命令行工具，进入项目目录，输入以下命令。

npm install vue-router --save-dev

​ 如果在一个模块化工程中使用他，必须要通过Vue.use()明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3、测试

1. 先删除么用的东西
2. components目录下存放自己编写的组件
3. 定义一个Content.vue的组件

七、Vue + ElementUI

1. 创建项目 并初始化

   vue init webpack demo
   

2. 安装依赖，vue-router、element UI、sass-loader、node-sass

   # 安装 vue-router
   npm install vue-router --save-dev
   
   # 安装 element-ui
   npm i element-ui -S
   
   # 安装依赖
   npm install
   
   # 安装依赖 SASS 加载器
   cnpm install sass-loader node-sass --save-dev
   
   # 启动测试
   npm run dev
   

八、路由嵌套

1. 创建两个文件[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vUw8AS5g-1626745132761)(F:/%E6%A1%8C%E9%9D%A2%E7%AC%94%E8%AE%B0/VUE.assets/image-20210704162726486.png)]

   <template>
     <h1>个人信息</h1>
   </template>
   
   <script>
   export default {
     name: "Profile"
   }
   </script>
   
   <style scoped>
   
   </style>
   

   <template>
     <h1>用户列表</h1>
   </template>
   
   <script>
   export default {
     name: "UserList"
   }
   </script>
   
   <style scoped>
   
   </style>
   

2. 将这两个页面进行嵌套

   1. 在router文件夹下的 index.js 文件中导入这两个页面

      import UserList from "@/views/user/UserList";
      import Profile from "@/views/user/Profile";
      

   2. 进行路由配置

      export default new VueRouter({
          routes: [
              {
                  path: '/Main',
                  component: Main,
                  children: [
                      {
                          path: '/user/UserList',
                          component: UserList
                      },
                      {
                          path: '/user/Profile',
                          component: Profile
                      }
                  ]
              },
              {
                  path: '/Login',
                  component: Login
              },
          ]
      })
      

3. Main.vue

   <template>
     <div>
       <el-container>
         <el-aside width="200px">
           <el-menu :default-openeds="['1']">
             <el-submenu index="1">
               <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
               <el-menu-item-group>
                 <el-menu-item index="1-1">
                   <router-link to="/user/profile">个人信息</router-link>
                 </el-menu-item>
                 <el-menu-item index="1-2">
                   <router-link to="/user/userlist">用户列表</router-link>
                 </el-menu-item>
               </el-menu-item-group>
             </el-submenu>
             <el-submenu index="2">
               <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
               <el-menu-item-group>
                 <el-menu-item index="2-1">分类管理</el-menu-item>
                 <el-menu-item index="2-2">内容列表</el-menu-item>
               </el-menu-item-group>
             </el-submenu>
           </el-menu>
         </el-aside>
   
         <el-container>
           <el-header style="text-align: right;font-size: 12px">
             <el-dropdown>
               <i class="el-icon-setting" style="margin-right: 15px"></i>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item>个人信息</el-dropdown-item>
                 <el-dropdown-item>退出登录</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </el-header>
   
           <el-main>
             <router-view />
           </el-main>
         </el-container>
       </el-container>
     </div>
   </template>
   
   <script>
   export default {
     name: "Main"
   }
   </script>
   
   <style scoped lang="scss">
     .el-header{
       background-color: #B3C0D1;
       color: #333;
       line-height: 60px;
     }
   
     .el-aside{
       color: #333;
     }
   </style>
   

九、参数传递与重定向

参数传递

1. 方式一：

   1. <el-menu-item index="1-2">
          <router-link :to="{name: 'userList' , params: {id : 2}}">用户列表</router-link>
      </el-menu-item>
      

   2. router/index.js

      path: '/user/UserList/:id',
      name:"userList",
      props: true,
      component: UserList
      

   3. /user/UserList.vue

      <template>
        <div>
          <h1>用户列表 id : {{ id }}</h1>
        </div>
      
      </template>
      
      <script>
      export default {
        name: "UserList",
        props:['id']
      }
      </script>
      

2. 方式二：

   1. <el-menu-item index="1-1">
          <router-link v-bind:to="{name: 'profile',params:{id : 1}}">个人信息</router-link>
      </el-menu-item>
      

   2. /router/index.js

      {
            path: '/user/Profile:id',
            name: "profile",
            component: Profile
      }
      

   3. /user/Profile.vue

      <template>
      <!--  所有元素必须在根节点下-->
        <div>
          <h1>个人信息 id : {{$route.params.id}}</h1>
        </div>
      
      </template>
      
      <script>
      export default {
        name: "Profile"
      }
      </script>
      

重定向

1. /router/index.js

           {
               path: '/gohome',
               //redirect 重定向
               redirect: "/Main"
           }
   

2. Main.vue

   <el-menu-item index="2-3">
       <router-link to="/gohome">返回主页</router-link>
   </el-menu-item>
   

十、路由模式与404

1. 路由模式有两种：

   • hash：带路径 # 符号，如：http://localhost/#/login
   • history：路径不带有 # 符号，如：http://localhost/login

2. 修改路由配置：

   //router/index.js 该文件下加一个mode：'history'进行参数设置
   export default new VueRouter({
       mode: 'history',
       routes: [
           {
               path: '/Main/:username',
               props: true,
               component: Main,
               children: [
                   {
                       path: '/user/UserList/:id',
                       name:"userList",
                       props: true,
                       component: UserList
                   },
                   {
                       path: '/user/Profile:id',
                       name: "profile",
                       component: Profile
                   }
               ]
           },
           {
               path: '/Login',
               component: Login
           },
           {
               path: '/gohome',
               redirect: "/Main"
           }
       ]
   })
   

3. 处理 404

   1. 创建一个名为NotFound.vue的视图组件
   2. 配置路由

           {
               path: '*',
               component: NotFound
           }
   

4. 路由钩子与异步请求

   • beforeRouterEnter：在进入路由前执行

   • beforeRouterLeave：在离开路由前执行

   •   beforeRouteEnter:(to,from,next)=>{
         console.log("进入之前");
         next();
       },
       beforeRouteLeave: (to , from , next)=>{
         console.log("进入之后");
         next();
       }
     

5. 参数说明：

   • to：路由将要跳转的路径信息
   • from：路径跳转前的路径信息
   • next：路由的控制参数
     • next() 跳入下一个页面
     • next(’/path’) 改变路由的跳转方向
     • next(false) 返回原来的页面
     • next((vm) => {}) 仅在beforeRouterEnter中可用，vm 是组件实例

6. 在钩子函数中使用异步请求

   1. 安装 Axios cnpm install axios -s

   2. main.js引用Axios

      import axios from 'axios'
      Vue.prototype.axios = axios
      

   3. 准备数据：只有在static目录下的文件是可以被访问到的，因此将静态文件放入该目录下

      // 静态数据存放位置
      static/mock/data.json
      

   4. 在 beforeRouterEnter 中进行异步请求

      <script>
      export default {
        name: "Profile",
        beforeRouteEnter:(to,from,next)=>{
          console.log("进入之前");
          next(vm => {
            vm.getData(); // 进入路由之前执行getData()方法
          });
        },
        beforeRouteLeave: (to , from , next)=>{
          console.log("进入之后");
          next();
        },
        methods: {
          getData: function () {
            this.axios({
              method: "GET",
              url: "http://localhost:8080/static/mock/data.json"
            }).then(function (response) {
              console.log(response);
            })
          }
        }
      }
      </script>
      

path’) 改变路由的跳转方向
- next(false) 返回原来的页面
- next((vm) => {}) 仅在beforeRouterEnter中可用，vm 是组件实例

6. 在钩子函数中使用异步请求

   1. 安装 Axios cnpm install axios -s

   2. main.js引用Axios

      import axios from 'axios'
      Vue.prototype.axios = axios
      

   3. 准备数据：只有在static目录下的文件是可以被访问到的，因此将静态文件放入该目录下

      // 静态数据存放位置
      static/mock/data.json
      

   4. 在 beforeRouterEnter 中进行异步请求

      <script>
      export default {
        name: "Profile",
        beforeRouteEnter:(to,from,next)=>{
          console.log("进入之前");
          next(vm => {
            vm.getData(); // 进入路由之前执行getData()方法
          });
        },
        beforeRouteLeave: (to , from , next)=>{
          console.log("进入之后");
          next();
        },
        methods: {
          getData: function () {
            this.axios({
              method: "GET",
              url: "http://localhost:8080/static/mock/data.json"
            }).then(function (response) {
              console.log(response);
            })
          }
        }
      }
      </script>