16.VUE_如何通过路径直接访问vue-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_29294165/article/details/121537789

本文深入介绍了Vue.js的核心概念，包括MVVM模式、组件化、数据绑定、路由、状态管理和通信框架Axios的使用。通过实例展示了Vue-Router的配置与使用，以及如何在项目中实现数据的双向绑定和自定义事件。文章最后通过一个实际项目展示了Vue的路由嵌套、参数传递和404页面的处理，帮助读者快速上手Vue开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

狂神说 Vue 笔记
Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

HTML + CSS + JS : 视图： 给用户看，刷新后台给的数据

网络通信： axios

页面跳转： vue-router

状态管理：vuex

Vue-UI : ICE , Element UI

一、前端核心分析

1. VUE 概述

Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合

2. 前端三要素

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

3. JavaScript框架

jQuery：大家熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容IE6、7、8;

Angular： Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发;对后台程序员友好，对前端程序员不太友好;最大的缺点是版本迭代不合理(如: 1代-> 2代，除了名字，基本就是两个东西;截止发表博客时已推出了Angular6)

React： Facebook出品，一款高性能的JS前端框架;特点是提出了新概念[虚拟DOM]用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率;缺点是使用复杂，因为需要额外学习一门[JSX] 语言;

Vue：一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点;

Axios ：前端通信框架;因为Vue 的边界很明确，就是为了处理DOM,所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery提供的AJAX通信功能;

前端三大框架：Angular、React、Vue

二、第一个Vue程序

1. 什么是MVVM

MVVM (Model-View-ViewModel) 是一种软件架构设计模式，由微软WPF (用于替代WinForm，以前就是用这个技术开发桌面应用程序的)和Silverlight (类似于Java Applet,简单点说就是在浏览器上运行的WPF)的架构师Ken Cooper和Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由John Gossman (同样也是WPF和Silverlight的架构师)于2005年在他的博客上发表。

MVVM 源自于经典的MVC (ModI-View-Controller) 模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下:

该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互

2. 为什么要使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型(Model),有几大好处：

低耦合：视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

3. Vue 是 MVVM 模式的实现者

在这里插入图片描述

Model ：模型层，在这里表示JavaScript对象
View ：视图层,在这里表示DOM (HTML操作的元素)
ViewModel ：连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者
ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel 能够监听到视图的变化，并能够通知数据发生改变

至此，我们就明白了，Vue.js 就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定

4. Vue 路径

Vue在线cdn:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

5. IDE配置vue

File->Settings->Plugins->搜索vue->安装vue->apply->ok
在这里插入图片描述

三、Vue基本语法

1. v-bind

现在数据和DOM已经被建立了关联，所有的东西都是响应式的。我们在控制台操作对象的属性，界面可以实时更新。

我们可以使用v-bind来绑定元素属性！

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

</head>
<body>
<!--view层，模板-->
<div id="app">
    <!-- {{message}}-->
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息
    </span>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //model：数据
        data: {
            message: "hello,vue"
        }

    });
</script>
</body>
</html>

2. v-if v-else

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

</head>
<body>
<!--view层，模板-->
<div id="app">
  <h1 v-if="type === 'A'">A</h1>
  <h1 v-else-if="type === 'B'">B</h1>
  <h1 v-else>C</h1>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            type: 'A'
        }

    });
</script>
</body>
</html>

3. v-for

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

</head>
<body>
<!--view层，模板-->
<div id="app">

    <li v-for="item in items">
        姓名： {{item.name}}
        年龄：{{item.age}}
    </li>

</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            items: [
                {name: "Ada", age: 18},
                {name: "Anna", age: 11},
                {name: "Blossom", age: 20}
            ]
        }


    });
</script>
</body>
</html>

4. v-on 事件绑定

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

</head>
<body>
<!--view层，模板-->
<div id="app">

    <button v-on:click="sayHi">请点我</button>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "你点我干嘛"
        },
        methods:{
            sayHi:function () {
                alert(this.message)
            }
        }


    });
</script>
</body>
</html>

四、Vue双向绑定 v-model

1. 什么是双向绑定

Vue.js是一个MVVM框架，即数据双向绑定,即当数据发生变化的时候,视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。

值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

2. 为什么要实现数据的双向绑定

在Vue.js 中，如果使用vuex ，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项,方便跟踪;局部性数据流使用双向，简单易操作。

3. 在表单中使用双向数据绑定

你可以用v-model指令在表单 <input>、<textarea> 及<select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
尽管有些神奇，但v-model本质上不过是语法糖。它负责监听户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

注意：v-model会忽略所有元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源，你应该通过JavaScript在组件的data选项中声明。

4. input双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message"> <span>{{message}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    vm = new Vue({
        el: "#app",
        data:{
            message:"你好，v-model"
        }
    })
</script>
</body>
</html>

运行结果：
在这里插入图片描述

5. radio双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--<input type="text" v-model="message"> <span>{{message}}</span>-->
    <input type="radio" value="男" name="sex" v-model="sex"/> 男
    <input type="radio" value="女" name="sex" v-model="sex">女
    <span>你选择的性别是：{{sex}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    vm = new Vue({
        el: "#app",
        data: {
            message: "你好，v-model",
            sex: ''
        }
    })
</script>
</body>
</html>

运行结果：
在这里插入图片描述

6. select双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--<input type="text" v-model="message"> <span>{{message}}</span>-->
    <!-- <input type="radio" value="男" name="sex" v-model="sex"/> 男
     <input type="radio" value="女" name="sex" v-model="sex">女
     <span>你选择的性别是：{{sex}}</span>-->
    <select v-model="select">
        <option value="" selected>--请选择--</option>
        <option>a</option>
        <option>b</option>
        <option>c</option>
    </select>
    <span>选中了谁：{{select}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    vm = new Vue({
        el: "#app",
        data: {
            message: "你好，v-model",
            sex: '',
            select: ''
        }
    })
</script>
</body>
</html>

运行结果：
在这里插入图片描述

五、Vue组件

组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：
在这里插入图片描述

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

<cmp v-for="item in items" v-bind:fj="item"></cmp>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
 Vue.component("cmp",{
     props: ["fj"],
     template:"<li>{{fj}}</li>"
 })
    vm = new Vue({
        el: "#app",
        data: {
            items: ['Java','Python','Php']

        }
    })
</script>
</body>
</html>

六、`Axios`通信

1. 什么是Axios

Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:

从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API [JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF (跨站请求伪造)
GitHub: https://github.com/ axios/axios
中文文档: http://www.axios-js.com/

在线Axios

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>

2. 为什么要使用Axios

由于Vue.js是一个视图层框架且作者(尤雨溪) 严格准守SoC (关注度分离原则)，所以Vue.js并不包含Ajax的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0 版本以后停止了对该插件的维护并推荐了Axios 框架。少用jQuery，因为它操作Dom太频繁 !

1. 新建json数据

文件名：data.json
JSON数据：

{
  "name": "ada",
  "age": "15",
  "sex": "女",
  "url":"https://www.baidu.com",
  "address": {
    "street": "文苑路",
    "city": "南京",
    "country": "中国"
  },
  "links": [
    {
      "name": "狂神哔哩哔哩vue",
      "url": "https://www.bilibili.com/video/BV18E411a7mC?p=9"
    },
    {
      "name": "baidu",
      "url": "https://www.baidu.com"
    },
    {
      "name": "百度翻译",
      "url": "https://fanyi.baidu.com/"
    }
  ]
}

2. Axios使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--v-clock:解决闪烁问题-->
    <style>
        [v-clock] {
            display: none;
        }
    </style>
</head>
<body>
<!--view层 模板-->
<div id="vue">
    <div>{{info.name}}</div>
    <div>{{info.age}}</div>
    <div>{{info.sex}}</div>
    <div>{{info.address.country}}</div>
    <a v-bind:href="info.url">点击我</a>
</div>
</body>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--导入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script>

    var vm = new Vue({
        el: "#vue",
        //data: 属性  data()方法
        data() {
            return {
                //请求的返回参数，必须和json字符串一样
                info: {}
            }
        },
        //钩子函数，链式编程，ES6新特性
        mounted() {//钩子函数 链式编程
            axios.get('../data.json').then(response => (this.info = response.data))
        }

    })
</script>
</html>

运行结果：
在这里插入图片描述

说明：

在这里使用了v-bind将a:href的属性值与Vue实例中的数据进行绑定
使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中
我们在data中的数据结构必须和Ajax响应回来的数据格式匹配！

3.计算属性

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数;简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已;可以想象为缓存！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--v-clock:解决闪烁问题-->
    <style>
        [v-clock] {
            display: none;
        }
    </style>
</head>
<body>
<!--view层 模板-->
<div id="app">
<p>currentTime1：{{currentTime1()}}</p>
<p>currentTime2：{{currentTime2}}</p>
</div>
</body>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script>

    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello,计算属性"
        },
        //methods：是方法
        methods: {
            currentTime1: function () {
                return Date.now();
            }
        },
        //computed：是属性
        computed:{//计算属性 methods computed方法名不能重名，重名之后只会调用methods方法
            currentTime2: function () {
                return Date.now();
            }
        }

    })
</script>
</html>

运行结果：
在这里插入图片描述

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

3. Vue的生命周期

官方文档：https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
Vue实例有一个完整的生命周期，也就是从开始创建初女台化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例。
请添加图片描述

七、内容分发 slot

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

比如准备制作一个待办事项组件(todo) ，该组件由待办标题(todo-title) 和待办内容(todo-items)组成，但这三个组件又是相互独立的，该如何操作呢?

1. 定义一个待办事项的组件

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

</head>
<body>
<!--view层，模板-->
<div id="app">
    <todo></todo>

</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

    //总组件
    Vue.component("todo", {
        template: `<div>
            <div>标题</div>
            <ul>
            <li>Java</li>
            </ul>
            </div>`
    })
    //vue
    var vm = new Vue({
        el: "#app",
        data: {}
    });

</script>
</body>
</html>

运行结果：
在这里插入图片描述

2. 标题和UL 中的数据实现动态绑定

需要让代办事项的标题和值实现动态绑定，怎么做呢？我们可以留一个插槽！

1. 把标题和数据的组件用插槽代替

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

</head>
<body>
<!--view层，模板-->
<div id="app">
    <todo></todo>

</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

    //总组件
    Vue.component("todo", {
        template: `<div>
            <slot name="todo-title"></slot>
            <ul>
            <slot name="todo-items"></slot>
            </ul>
            </div>`
    })
    //vue
    var vm = new Vue({
        el: "#app",
        data: {
        }
    });

</script>
</body>
</html>

2. 创建标题和数据的组件

  //标题组件
    Vue.component("todo-title", {
        props: ['title'],
        template: `<div>{{title}}</div>`;
    })
    //数据组件
    Vue.component("todo-items", {
        props: ['item'],
        template: `<li>{{item}}</li>`;
    })

3. 实例化Vue并初始化数据

//vue
    var vm = new Vue({
            el: "#app",
            data: {
                title: "标题",
                todoItems: ['java', 'go', 'c#']
            }
        })
    ;

4. 通过插槽绑定值

<!--view层，模板-->
<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>

5. 完整代码

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

</head>
<body>
<!--view层，模板-->
<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>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

    //总组件
    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>`
    })
    //vue
    var vm = new Vue({
            el: "#app",
            data: {
                title: "标题",
                todoItems: ['java', 'go', 'c#']
            }
        })
    ;

</script>
</body>
</html>

运行结果：
在这里插入图片描述

说明：我们的todo-title和todo-items组件分别被分发到了todo组件的todo-title和todo-items插槽中

八、自定义事件内容分发

通过以上代码不难发现，数据项在Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢?
此时就涉及到参数传递与事件分发了，Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;
使用this.$emit (‘自定义事件名’,参数)

1. 运行实例

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

</head>
<body>
<!--view层，模板-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    :item="item" :index="index" v-on:remove="removeItem(index)"></todo-items>
    </todo>

</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

    //总组件
    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', 'index'],
        template: `
          <li>{{ index}}----{{ item }}
          <button @click="remove">删除</button>
          </li>`,
        methods: {
            remove: function (index) {
                this.$emit('remove',index)
            }
        }
    })
    //vue
    var vm = new Vue({
            el: "#app",
            data: {
                title: "标题",
                todoItems: ['java', 'go', 'c#']
            },
            methods: {
                removeItem: function (even) {
                    this.todoItems.splice(even, 1);//一次删除一个元素
                }
            }

        })
    ;

</script>
</body>
</html>

运行
在这里插入图片描述

2. 逻辑理解

在这里插入图片描述

3.Vue入门小结

核心：数据驱动，组件化
优点：借鉴了AngularJS的模块化开发和React的虚拟Dom，虚拟Dom就是把Demo操作放到内存中执行；
常用的属性：

v-if
v-else-if
v-else
v-for
v-on绑定事件，简写@
v-model数据双向绑定
v-bind给组件绑定参数，简写：

组件化：

组合组件slot插槽
组件内部绑定事件需要使用到this.$emit(“事件名”,参数);
计算属性的特色，缓存计算数据
遵循SoC关注度分离原则，Vue是纯粹的视图框架，并不包含，比如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信；

说明
Vue的开发都是要基于NodeJS，实际开发采用Vue-cli脚手架开发，vue-router路由，vuex做状态管理；
Vue UI，界面我们一般使用ElementUI（饿了么出品），或者ICE（阿里巴巴出品）来快速搭建前端项目~~

官网：

element
React

九、第一个vue-cli项目

1. 什么是vue-cli

vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;

预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速;

主要功能：

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

2. 需要的环境

注意：建议安装用管理员安装，运行命令用cmd运行，否则安装不上或者显示不是内部命令

1. 安装文件路径

安装就是无脑的下一步就好，安装在自己的环境目录下
Node.js：http://nodejs.cn/download/
Git：https://git-scm.com/doenloads
镜像：https://npm.taobao.org/mirrors/git-for-windows/

2. 检查是否安装成功

安装教程：智深先生的npm和cnpm（windows）安装步骤
确认nodejs安装成功:

cmd 下输入 node -v查看是否能够正确打印出版本号即可!
cmd 下输入 npm-v查看是否能够正确打印出版本号即可!
这个npm,就是一个软件包管理工具,就和linux下的apt软件安装差不多!

npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。

3. 安装淘宝镜像加速器`（cnpm）

注意：建议安装用管理员安装，运行cnpm -v等命令用cmd运行，否则安装不上或者显示不是内部命令
安装Node.js淘宝镜像加速器（cnpm）这样的话，下载会快很多~

# -g 就是全局安装
npm install cnpm -g

# 若安装失败，则将源npm源换成淘宝镜像
# 因为npm安装插件是从国外服务器下载，受网络影响大
npm config set registry https://registry.npm.taobao.org

# 然后再执行
npm install cnpm -g

安装位置：C:\Users\你的用户名\AppData\Roaming\npm

3. 安装vue-cli

注意：建议安装用管理员安装，运行vue list等命令用cmd运行，否则安装不上或者显示不是内部命令

#在命令台输入
cnpm install vue-cli -g
#查看是否安装成功
vue list

4. 第一个 vue-cli 应用程序

1.创建一个Vue项目

我们随便建立一个空的文件夹在电脑上，我这里在E盘下新建一个目录E:\VUE\2.vue-cli
在这里插入图片描述

2.创建一个基于webpack模板的vue应用程序

# 这里的 myvue 是项目名称，可以根据自己的需求起名
vue init webpack myvue

一路都选择no即可,下图展示：
在这里插入图片描述
说明：

Project name：项目名称，默认回车即可
Project description：项目描述，默认回车即可
Author：项目作者，默认回车即可
Install vue-router：是否安装vue-router，选择n不安装（后期需要再手动添加）
Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加)
Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加）
Setupe2etests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加）
Should we run npm install for you after the,project has been created:创建完成后直接初始化，选择n，我们手动执行；运行结果！

安装文件夹显示：
在这里插入图片描述

3.初始化并运行

注意：使用管理员运行，否则很有可能报错

cd myvue
npm install
npm run dev

npm install运行完成后多了一个node_modules文件夹：
在这里插入图片描述
npm run dev运行完成后：

访问http://localhost:8080/

十、Webpack

1.什么是Webpack

本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。
当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle.
Webpack是当下最热门的前端资源模块化管理和打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换，任何形式的资源都可以当做模块，比如CommonsJS、AMD、ES6、 CSS、JSON、CoffeeScript、LESS等;
伴随着移动互联网的大潮，当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里，使用HTML5、CSS3、ES6 等新的技术来开发丰富的功能，网页已经不仅仅是完成浏览器的基本需求; WebApp通常是一个SPA (单页面应用) ，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的JS代码，这给前端的开发流程和资源组织带来了巨大挑战。
前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。
WebPack 是一款模块加载器兼打包工具，它能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。

2. 安装Webpack

1. 安装命令

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

管理员安装，安装演示如下图：
在这里插入图片描述

2. 安装测试

测试安装成功: 输入以下命令有版本号输出即为安装成功

webpack -v
webpack-cli -v

cmd运行命令，如下图：
在这里插入图片描述

3. 配置

创建 webpack.config.js配置文件

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

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

直接运行webpack命令打包

3. 使用webpack

1. 创建项目

(空文件夹)<交由idea打开会生成一个.idea文件那么就说明该文件就交由idea负责>
在这里插入图片描述

2. 创建modules目录

创建一个名为modules的目录，用于放置JS模块等资源文件
在这里插入图片描述

3. 创建模块文件

在modules下创建模块文件，如hello.js，用于编写JS模块相关代码
路径：modules/hello.js
代码：

//暴露一个方法
exports.sayHi = function () {
    document.write("<h1>js--ES6</h1>")
}

4.创建main.js入口文件

在modules下创建一个名为main.js的入口文件，main.js 请求hello.js 调用sayHi()方法
路径：modules/main.js
代码：

//require 导入一个模块，就可以调用这个模块中的方法了
var hello = require("./hello");
hello.sayHi();

5. 创建webpack-config.js 配置文件

在主目录创建webpack-config.js , webpack-config.js 这个相当于webpack的配置文件
entry：入口文件，指定Web Pack用哪个文件作为项目的入口
output：输出，指定WebPack把处理完成的文件放置到指定路径
路径：webpack.config.js
代码：

module.exports = {
    entry:'./modules/main.js',
    output:{
        filename:"./js/bundle.js"
    }
}

6. 打包

在idea命令台输入webpack命令（idea要设置管理员启动）
cmd到项目路径进行打包E:\VUE\3.webpack-study>webpack

在这里插入图片描述

完成上述操作之后会在主目录生成一个dist文件生成的js文件夹路径为/ dist/js/bundle.js

7. 在项目目录下创建HTML页面

在项目目录下创建HTML页面，如index.html，导入webpack打包后的JS文件
路径：index.html
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>

在这里插入图片描述

8. 运行

在这里插入图片描述

9. 监听变化

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

十一、vue-router路由

11.1 说明

学习的时候，尽量的打开官方的文档
Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功有：

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

11.2、安装

基于第一个vue-cli进行测试学习；先查看node modules中是否存在vue-router
vue-router是一个插件包，所以我们还是需要用npm/cnpm来进行安装的。

打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save-dev

如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能：
路径：src/main.js
代码：


import Vue from 'vue'
import App from './App'

//引入vue-router
//import VueRouter from "vue-router";
Vue.config.productionTip = false

//显示声明使用vue-router
//Vue.use(VueRouter)

new Vue({
  el: '#app',
  components: {App},
  template: '<App/>'
})

11.3、测试

1. 清理多余文件

先删除没有用的东西，components 下面的组件，assets下面的资源文件
在这里插入图片描述

2. 修改src/App.vue的引用

路径：src/App.vue
代码：

<template>
  <div id="app">

  </div>
</template>



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


<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3. 运行

npm run dev

运行结果没报错：
在这里插入图片描述

4.components 目录下新建组件

选中components ->右键->New->Vue Component ->输入组件名称->创建组件成功

创建Content.vue的组件
路径：src/components/Content.vue
代码：

<template>
  <h1>内容页</h1>
</template>

<script>
export default {
  name: "Content"
}
</script>

<style scoped>

</style>

创建Main.vue的组件
路径：src/components/Main.vue
代码：

<template>
<h1>首页</h1>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>

创建Fj.vue的组件
路径：src/components/Fj.vue
代码：

<template>
 <h1>FJ</h1>
</template>

<script>
export default {
  name: "Fj"
}
</script>

<style scoped>

</style>

5. 新建router文件夹，创建配置路由文件

在src下面创建router文件夹
在文件夹下面新建index.js路由文件。系统默认index为主配置文件名。
路径：src/router/index.js
代码：

import Vue from "vue";
import VueRouter from "vue-router";
import Content from "../components/Content";
import Main from "../components/Main";
import Fj from "../components/Fj";
//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes: [
    {
      //路由路径
      path: '/content',
      name: 'content',
      //跳转的组件
      component: Content
    }, {
      path: '/main',
      name: 'main',
      component: Main
    }, {
      path: '/fj',
      name: 'fj',
      component: Fj
    }
  ]
});

6. 在main.js中配置路由

路径：src/main.js
代码：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//1. 引入配置的路由
import router from './router'//自动扫码里面的路由配置

//来关闭生产模式下给出的提示
Vue.config.productionTip = false
//2.安装路由,因为index.js配置安装了路由，当前可写可不写
//Vue.use(router);
new Vue({
  el: '#app',
  //3.. 配置路由
  router,
  components: {App},
  template: '<App/>'
})

7. 在App.vue使用路由

路径：src/App.vue
代码：

<template>
  <div id="app">
    <h1>AppVue</h1>
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-link to="/fj">测试</router-link>
    <router-view></router-view>
  </div>
</template>


<script>


export default {
  name: 'App',

}
</script>


<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行结果：
在这里插入图片描述

十二、实战快速上手

我们采用实战教学模式并结合ElementUI组件库，将所需知识点应用到实际中，以最快速度带领大家掌握Vue的使用；

12.1、创建工程

创建一个名为hello-vue的工程vue init webpack hello-vue，使用cmd创建，管理员模式运行错误
安装依赖，我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件
注意：除了cnpm和初始化项目，以下命令行都要使用管理员模式运行

#初始化项目 `cmd普通模式`

vue init webpack hello-vue

#进入工程目录`管理员模式`

cd hello-vue

#安装vue-routern  `管理员模式`

npm install vue-router --save-dev

#安装element-ui `管理员模式`

npm i element-ui -S

#安装依赖 `管理员模式`

npm install

# 安装SASS加载器 `cmd普通模式`

cnpm install sass-loader node-sass --save-dev

#启功测试 `管理员模式、cmd普通模式`

npm run dev

Npm命令解释：

npm install moduleName：安装模块到项目目录下
npm install -g moduleName：-g的意思是将模块安装到全局，具体安装到磁盘哪个位置要看npm config prefix的位置
npm install -save moduleName：–save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写
npm install -save-dev moduleName:–save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写

12.2、创建登录页面

把没有用的初始化东西删掉！在源码目录中创建如下结构：

1. 创建文件夹

assets：用于存放资源文件
components：用于存放Vue功能组件
views：用于存放Vue视图组件
router：用于存放vue-router配置

2. 创建视图组件

在views目录下创建视图组件

1. 首页视图

路径：src/views/Main.vue
代码：

<template>
<h1>首页</h1>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>

2. 创建登录视图

路径：src/views/Login.vue
代码：

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="温馨提示" :visible.sync="dialogVisiable" width="30%" :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return{
      form:{
        username:'',
        password:''
      },
      //表单验证，需要在 el-form-item 元素中增加prop属性
      rules:{
        username:[
          {required:true,message:"账号不可为空",trigger:"blur"}
        ],
        password:[
          {required:true,message:"密码不可为空",tigger:"blur"}
        ]
      },

      //对话框显示和隐藏
      dialogVisible:false
    }
  },
  methods:{
    onSubmit(formName){
      //为表单绑定验证功能
      this.$refs[formName].validate((valid)=>{
        if(valid){
          //使用vue-router路由到指定界面，该方式称为编程式导航
          this.$router.push('/main');
        }else{
          this.dialogVisible=true;
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-box{
  border:1px solid #DCDFE6;
  width: 350px;
  margin:180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}
.login-title{
  text-align:center;
  margin: 0 auto 40px auto;
  color: #303133;
}
</style>

3. 创建路由

在router目录下创建一个名为index.js的vue-router路由配置文件
地址：src/router/index.js
代码：

//导入vue
import Vue from "vue";
import VueRouter from "vue-router";
//导入组件
import Main from "../views/Main";
import Login from "../views/Login";
//使用vue
Vue.use(VueRouter)
//导出
export default new VueRouter({
  routes:[
    {
      //登录页
      path: '/main',
      component: Main
    },
    //首页
    {
      path: '/login',
      component: Login
    },

  ]
})

4. mian.js引入路由文件

路径：src/main.js
代码：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(router)
Vue.use(ElementUI)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
 // render:h=>h(App)
})

5. APP.vue配置页面

路径：src/App.vue
代码：

<template>
  <div id="app">
  <!--    <router-link to="/main">首页</router-link>
    <router-link to="/login">登录</router-link>-->
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

6. 测试

1. 运行

npm run dev

2. 错误解决

1. VUE项目报错： Syntax Error: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

解决：

把当前项目下的package.json中的"sass-loader" 的版本号更改成"sass-loader": "^4.0.0",
运行cnpm install 命令更新版本
npm run dev 重新运行即可

12.3、路由嵌套

嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。

1. 创建、修改视图组件

创建用户信息组件，在views 目录下面创建用户文件夹user，路径为： src/views/user

个人信息组件Profile.vue
在用户列表组件在 views/user 目录下创建一个名为 Profile.vue 的视图组件；
路径：src/views/user/Profile.vue
代码：

<template>
  <h1>个人信息</h1>
</template>

<script>
export default {
  name: "Profile"
}
</script>

<style scoped>

</style>

个人信息组件List.vue
在用户列表组件在 views/user 目录下创建一个名为 List.vue 的视图组件；
路径：src/views/user/List.vue
代码：

<template>
<h1>用户列表</h1>
</template>

<script>
export default {
  name: "List"
}
</script>

<style scoped>

</style>

修改Main主页视图组件
修改 Main.vue 视图组件，此处使用了 ElementUI 布局容器组件
路径：src/views/Main.vue
代码：

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <!--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/list">用户列表</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!--2.左侧内容管理模块-->
          <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>

2. 配置子(嵌套)路由

修改 router 目录下的 index.js 路由配置文件，使用children放入main中写入子模块
路径：src/router/index.js
代码：

//导入vue
import Vue from "vue";
import VueRouter from "vue-router";
//导入组件
import Main from "../views/Main";
import Login from "../views/Login";
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";
//使用vue
Vue.use(VueRouter)
//导出
export default new VueRouter({
  routes: [
    {
      //登录页
      path: '/main',
      component: Main,//嵌套路由
      children: [
        {path: '/user/profile', component: UserProfile},
        {path: '/user/list', component: UserList},
      ]
    },
    //首页
    {
      path: '/login',
      component: Login
    },

  ]
})

3. 运行

路径：http://127.0.0.1:8080/x5#/main
在这里插入图片描述

12.4、参数传递

1. 普通传值

1. 修改页面跳转路径

此时我们在Main.vue中的route-link位置处 to 改为了 :to，是为了将这一属性当成对象使用，注意 router-link 中的 name 属性名称一定要和路由中的 name 属性名称匹配，因为这样 Vue 才能找到对应的路由路径；
路径：src/views/Main.vue
修改的代码：

  <!-- <router-link to="/user/profile">个人信息</router-link>-->
  <!--name是组件的名字 params是传的参数 如果要传参数的话就需要用v:bind:来绑定-->
  <router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>

完整代码：

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <!--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>-->
                <!--name是组件的名字 params是传的参数 如果要传参数的话就需要用v:bind:来绑定-->
                <router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <!--插入的地方-->
                <router-link to="/user/list">用户列表</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!--2.左侧内容管理模块-->
          <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>

2. 修改路由

主要是router下的index.js中的 path 属性中增加了 :id 这样的占位符
路径：src/router/index.js
修改的代码：

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

完整代码：

//导入vue
import Vue from "vue";
import VueRouter from "vue-router";
//导入组件
import Main from "../views/Main";
import Login from "../views/Login";
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";
//使用vue
Vue.use(VueRouter)
//导出
export default new VueRouter({
  routes: [
    {
      //登录页
      path: '/main',
      component: Main,//嵌套路由
      children: [
        {
          path: '/user/profile/:id',
          name: 'UserProfile',
          component: UserProfile
        },
        {path: '/user/list', component: UserList},
      ]
    },
    //首页
    {
      path: '/login',
      component: Login
    },

  ]
})

3. 页面显示

在要展示的组件Profile.vue中接收参数使用 {{$route.params.id}}来接收
路径：src/views/user/Profile.vue
代码：

<template>
<!--  所有的元素必须在根节点下-->
  <div>
    <h1>个人信息</h1>
    {{$route.params.id}}
  </div>

</template>

<script>
export default {
  name: "Profile"
}
</script>

<style scoped>

</style>

2. 使用props传值

优点：减少耦合

1.修改路由配置

主要在router下的index.js中的路由属性中增加了 props: true 属性
路径：src/router/index.js
修改的代码：

  {
          path: '/user/profile/:id',
          name: 'UserProfile',
          component: UserProfile,
          props:true
        },

2.页面显示

在Profile.vue接收参数为目标组件增加 props 属性
路径：src/views/user/Profile.vue
代码：

<template>
  <!--  所有的元素必须在根节点下-->
  <div>
    <h1>个人信息</h1>
<!--    {{$route.params.id}}-->
    {{id}}
  </div>

</template>

<script>
export default {
  props:['id'],
  name: "Profile"
}
</script>

<style scoped>

</style>

12.5、组件重定向

重定向的意思大家都明白，但 Vue 中的重定向是作用在路径不同但组件相同的情况下

1. 配置路由

路径：src/router/index.js
修改的代码：

{
      path: '/goHome',
      redirect: '/main'
    }

说明：这里定义了两个路径，一个是 /main ，一个是 /goHome；
其中 /goHome 重定向到了 /main 路径，由此可以看出重定向不需要定义组件；

2. main.vue添加链接

路径：src/views/Main.vue
代码：

 <el-menu-item index="1-3">
   <!--插入的地方-->
   <router-link to="/goHome">回到首页</router-link>
</el-menu-item>

3. 运行

路径：http://127.0.0.1:8080/x5#/main
在这里插入图片描述

12.6、main页面获取登录名（可不看）

1. 登录页获取用户名

路径：src/views/Login.vue
修改代码：

methods:{
    onSubmit(formName){
      //为表单绑定验证功能validate
      this.$refs[formName].validate((valid)=>{
        if(valid){
          //使用vue-router路由到指定界面，该方式称为编程式导航
          //跳转到main页面，传入username用户名
          this.$router.push('/main/'+this.form.username);
        }else{
          this.dialogVisible=true;
          return false;
        }
      });
    }
  }

完整代码：

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
<!--        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>-->
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="温馨提示" :visible.sync="dialogVisiable" width="30%" :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return{
      form:{
        username:'',
        password:''
      },
      //表单验证，需要在 el-form-item 元素中增加prop属性
      rules:{
        username:[
          {required:true,message:"账号不可为空",trigger:"blur"}
        ],
        password:[
          {required:true,message:"密码不可为空",tigger:"blur"}
        ]
      },

      //对话框显示和隐藏
      dialogVisible:false
    }
  },
  methods:{
    onSubmit(formName){
      //为表单绑定验证功能validate
      this.$refs[formName].validate((valid)=>{
        if(valid){
          //使用vue-router路由到指定界面，该方式称为编程式导航
          //跳转到main页面，传入username用户名
          this.$router.push('/main/'+this.form.username);
        }else{
          this.dialogVisible=true;
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-box{
  border:1px solid #DCDFE6;
  width: 350px;
  margin:180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}
.login-title{
  text-align:center;
  margin: 0 auto 40px auto;
  color: #303133;
}
</style>

2. 路由配置参数

路径：src/router/index.js
修改的代码：

{
      //登录页配置name
      path: '/main/:name',
      component: Main,//嵌套路由
      props:true,
      children: [
        {
          path: '/user/profile/:id',
          name: 'UserProfile',
          component: UserProfile,
          props: true
        },
        {path: '/user/list', component: UserList},
      ]
    },

3. 页面显示

路径：src/views/Main.vue
代码：

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <!--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>-->
                <!--name是组件的名字 params是传的参数 如果要传参数的话就需要用v:bind:来绑定-->
                <router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <!--插入的地方-->
                <router-link to="/user/list">用户列表</router-link>
              </el-menu-item>
              <el-menu-item index="1-3">
                <!--插入的地方-->
                <router-link to="/goHome">回到首页</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!--2.左侧内容管理模块-->
          <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>
          <!-- 显示用户名-->
          <span>{{ name }}</span>
        </el-header>
        <el-main>
          <!--在这里展示视图-->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  //接受显示用户名参数
  props: ['name'],
  name: "Main"
}
</script>
<style scoped lang="scss">
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

12.7、路由模式与 404

1. 路由模式

路由模式有两种

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

修改路由配置，代码如下：

export default new Router({
  mode: 'history',
  routes: [
  ]
});

2. 404页面创建

1. 新建NotFound页面

路径：src/views/NotFound.vue
代码：

<template>
  <div>
    <h1>404，你的页面走丢了</h1>
  </div>

</template>

<script>
export default {
  name: "NotFound"
}
</script>

<style scoped>

</style>

2. 配置路由

路径：src/router/index.js
代码：

 {
      path: '*',
      component: NotFound
    }

3. 测试

访问错误路径：http://127.0.0.1:8080/login11
在这里插入图片描述

3.路由钩子与异步请求

1. 路由钩子与异步请求

beforeRouteEnter：在进入路由前执行
beforeRouteLeave：在离开路由前执行

代码演示

export default {
  props:['id'],
  name: "Profile",
  //过滤器，
  beforeRouteEnter:(to,from,next)=>{
    console.log("进入路由之前")
    next();
  },
  beforeRouteLeave:(to,from,next)=>{
    console.log("准备离开个人信息页");
    next();
  },
}

参数说明：

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

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

1、安装 Axios

cnpm install --save axios
cnpm install --save vue-axios

2、main.js引用 Axios

路径：src/main.js
代码：

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

3、准备数据
只有我们的当前项目的 static 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下。
static/mock 所有的测试数据都放在这下面，mock是测试的专有名词
路径：static/mock/data.json
代码：

{
  "name": "ada",
  "age": "15",
  "sex": "女",
  "url":"https://www.baidu.com",
  "address": {
    "street": "文苑路",
    "city": "南京",
    "country": "中国"
  },
  "links": [
    {
      "name": "狂神哔哩哔哩vue",
      "url": "https://www.bilibili.com/video/BV18E411a7mC?p=9"
    },
    {
      "name": "baidu",
      "url": "https://www.baidu.com"
    },
    {
      "name": "百度翻译",
      "url": "https://fanyi.baidu.com/"
    }
  ]
}

4、在 beforeRouteEnter 中进行异步请求

路径：src/views/user/Profile.vue
代码：

export default {
  props: ['id'],
  name: "Profile",
  //过滤器，
  beforeRouteEnter: (to, from, next) => {
    console.log("进入路由之前");//加载数据
    next(vm => {
      vm.getData();//进入路由之前执行getData方法
    });
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("准备离开个人信息页");
    next();
  },
//axios
  methods: {
    getData: function () {
      this.axios({
        method: 'get',
        headers:{'Content-Type':'application/json'},
        url: 'http://127.0.0.1:8080/static/mock/data.json'
      }).then(function (response) {
        console.log(response)
      })
    }
  }
}