Vue.js入门

Vue.js 是什么

​ Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:

Vue.js安装(最新版本2.6.11)

Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器

在开发环境下不要使用压缩版本,不然你就失去了所有常见错误相关的警告!

安装教程:https://cn.vuejs.org/v2/guide/installation.html

使用Vue.js

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


本地引入本地地址即可

尝试使用Vuejs

<div id="app">
    {{ message }}
</div>
<hr>
<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息!
  </span>
</div>
<hr>
<div id="app-3">
    <p v-if="seen">现在你看到我了</p>
</div>
<hr>
<div id="app-4">
    <ul>
        <li v-for="item in list1">{{item}}</li><!--相当于遍历-->
    </ul>

</div>
<hr>
<!--//示例计数器-->
<div id="app-5">
    <p>当前计数:{{count}}</p>
<!--    <button v-on:click="count++">+</button>-->
<!--    <button v-on:click="count&#45;&#45;">-</button>-->
        <button @click="Increment">+</button><!--@:是v-on 的语法糖-->
        <button @click="Less">-</button>
</div>
<script>


    var app = new Vue({
        el: '#app',//选中的位置
        data: {
            message: 'Hello Vue!'//给message赋值
        }
    })
    //绑定元素 attribute
    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    })
    //显示和隐藏
    var app3 = new Vue({
        el: '#app-3',
        data: {
            seen: true//true:显示  false: 隐藏
        }
    })
    //vue展示列表
    const app4=new Vue({
        el: '#app-4',
        data:{
            list1:["l1","l2","l3","l4"]
        }
    });
    app4.$data.list1.push("l5");//在data前面加一个$用来分辨其他的data
    //示例计数器
    const app5=new Vue({
        el:"#app-5",
        data:{
            count:1
        },
        methods:{//定义方法的
            //加
           Increment:function () {
               this.count++;
           },
            //减
            Less:function () {
                this.count--;
            }
        }
    });
</script>

Vue中的mvvm

MVVMModel–view–viewmodel)是一种软件架构模式

MVVM有助于将图形用户界面的开发与业务逻辑后端逻辑(数据模型)的开发分离开来,这是通过置标语言或GUI代码实现的。MVVM的视图模型是一个值转换器,[1] 这意味着视图模型负责从模型中暴露(转换)数据对象,以便轻松管理和呈现对象。在这方面,视图模型比视图做得更多,并且处理大部分视图的显示逻辑。[1] 视图模型可以实现中介者模式,组织对视图所支持的用例集的后端逻辑的访问。

MVVM是马丁·福勒的PM(Presentation Model)设计模式的变体。[2][3] MVVM以相同的方式抽象出视图的状态和行为,[3] 但PM以依赖于特定用户界面平台的方式抽象出视图(建立了视图模型)。
MVVM和PM都来自MVC模式。

MVVM由微软架构师Ken Cooper和Ted Peters开发,通过利用WPF(微软.NET图形系统)和Silverlight(WPF的互联网应用衍生品)的特性来简化用户界面的事件驅動程式設計。[3] 微软的WPF和Silverlight架构师之一John Gossman于2005年在他的博客上发表了MVVM。

MVVM也被称为model-view-binder,特别是在不涉及.NET平台的实现中。ZK(Java写的一个Web应用框架)和KnockoutJS(一个JavaScript)使用model-view-binder。[3][4][5]

以上是维基百科里的解释

下面我们来看看vue中mvvm

虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

创建Vue实例传入的options

el:决定之后Vue实例会管理哪一个DOM

  • 类型string | Element
  • 限制:只在用 new 创建实例时生效。

data:Vue实例对应的数据对象

  • 类型Object | Function(组件当中data必须是一个函数)
  • 限制:组件的定义只接受 function

methods:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用

  • 类型{ [key: string]: Function }

详细:https://cn.vuejs.org/v2/api/index.html

Vue的生命周期

基本语法

插值操作

Mustache语法(双大括号语法)

v-once指令的使用

  • 该指令后面不需要跟任何表达式(比如之前的v-for后面是跟表达式的)。
  • 该指令表示元素和组件(组件后面才会学习)只渲染一次,不会随着数据的改变而改变。
<div id="app">
  <p v-once>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:'app',
    data:{
      message:'hello vue'
    }
  });
</script>

v-html

  • 该指令后面往往会跟上一个string类型
  • 会将string的html解析出来并且进行渲染
<div id="app1">
  <div v-html="url"></div>
</div>
<script src="js/vue.js"></script>
<script>
  const app=new Vue({
    el:'#app1',
    data:{
      url:'<a href="http://www.baidu.com">百度一下</a>'
    }
  });
</script>

v-text

  • 作用和Mustache比较相似:都是用于数据显示在界面中
  • 它通常情况下,接受一个string类型
  • 它会替换标签内的所有内容,不解析特殊字符
<div id="app">
  <p v-text="message"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:'#app',
    data:{
      message:'hello vue'
    }
  });
</script>

v-pre

  • 用于跳过这个元素和它子元素编译过程,用于显示原本的Mustache语法
<div id="app">
  <p >{{message}}</p>
  <p v-pre>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:'#app',
    data:{
      message:'hello vue'
    }
  });
</script>

image-20200311150347012效果

v-cloak

  • 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>
<div id="app" v-cloak>
  <p >{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
<!--  当app实例对#app进行管理后cloak会vein删掉-->
  setTimeout(()=>{
      var app=new Vue({
          el:'#app',
          data:{
              message:'hello vue'
          }
      });
  },1000);

</script>

绑定属性

v-bind

  • v-bind 指令被用来响应地更新 HTML 属性,其实它是支持一个单一 JavaScript 表达式 (v-for 除外)
<div id="app">
<!--  错误示范:
      <img src="{{imgUrl}}">在vue中不会识别这个会把当做普通的字符串
      -->
<img v-bind:src="imgUrl">
<!--简写-->
<img :src="imgUrl">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:'#app',
    data:{
      imgUrl:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1307955174,105946806&fm=26&gp=0.jpg'
    }
  });
</script>

动态绑定class(对象语法)

  <style>
    .ative{
      color: red;
    }
  </style>
</head>
<body>

<div id="app">
<!--  在有时候我们需要固定的class我们就可直接写 原本class  这两个是可以同时存在的-->
<p class="title" :class="{ative:isAtive,ative1:isAtive2}">{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:'#app',
    data:{
      message:'hello vue',
        isAtive:true,
        isAtive2: false
    }
  });
</script>

如果过于复杂的可以用methods来返回

<p class="title" :class="getClass()">{{message}}</p>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue',
            isAtive: true,
            isAtive2: false
        },
        methods: {
            getClass: function () {
                return {ative: this.isAtive, ative1: this.isAtive2}
            }
        }
    });
</script>
 

动态绑定class(数组语法)

<div id="app">
  <p class="title" :class="[a,b]">{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue',
            a: 'ative',
            b: 'ativeq'
        }
    });
</script>

动态绑定style(对象语法)

<div id="app">
<!--  <p :style="{属性名:属性值}">{{message}}</p>-->
  <p :style="{color:fontColor}">{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:'#app',
    data:{
      message:'hello vue',
      fontColor:'red'
    }
  });
</script>

动态绑定style(数组语法)

<div id="app">
<!--  <p :style="[]">{{message}}</p>-->
  <p :style="[style1,style2]">{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:'#app',
    data:{
      message:'hello vue',
      style1:{color:'red'},
        style2:{fontSize:'24px'},
    }
  });
</script>

计算属性

基本使用

<div id="app">
{{fullName}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:'#app',
    data:{
      firstName:"谢",
      lastName :"超" ,
    },
      //计算属性
      computed:{
        fullName:function () {
            return this.firstName+this.lastName;
        }
      }
  });
</script>

计算属性的复杂操作

<div id="app">
  <p>书的总价位:{{totalPrice}}</p>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:'#app',
    data:{
      message:'hello vue',
      books:[
          {name:"java",price:123},
          {name:"c",price:12},
          {name:"c#",price:1323},
          {name:"hph",price:123},
          ]
    },
    computed:{
        totalPrice:function () {
            let total=0;
            for (let i=0;i<this.books.length;i++ ){
                total+=this.books[i].price;
            }
            return total;
        }
    }
  });
</script>

计算属性的getter和setter

  • 每个计算属性都包含有getter和setter
<div id="app">
  {{fullName}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            firstName:"谢",
            lastName :"超" ,
        },
        //计算属性
        computed:{
            // fullName:function () {
            //     return this.firstName+this.lastName;
            // }
            fullName: {//一般情况下计算属性只有get方法没有set方法所以可以简写成上面哪种方式
                set:function(){

                },
                get:function () {
                    return this.firstName + this.lastName;
                }
            }
        }
    });
</script>

计算属性和methods的对比

案列:

<div id="app">
  计算属性:{{fullName}}
  methods:{{fullName1}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            firstName:"张",
            lastName :"三" ,
        },
        //计算属性
        computed:{
            fullName:function () {
                return this.firstName+this.lastName;
            }
        },
        methods:{
            fullName1:function () {
                return this.firstName+this.lastName;
            }
        }
    });
</script>

注:我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 firstNamelastName还没有发生改变,多次访问 fullName计算属性会立即返回之前的计算结果,而不必再次执行函数。

由此案列可以得出:使用计算属性比method性能要高,要多使用计算属性

块级作用域let/var的区别

  • 声明次数(同一变量)
    var 可以声明多次
    let 只可声明一次

    //var 
    var a=1;
    var a=2;
    console.log(a); // 2
    //let
    let b=1;
    let b=2;//直接报错  
    
  • 作用域
    var 是函数级作用域,let是块级作用域

    • ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。
  • 变量提升问题

    //var
    console.log(a);
    var a=0;
    //结果a= undefined
    //let 暂时性死区(let块级作用域下,在变量声明之前的区域内不可使用该变量。)
    console.log(b);//Uncaught ReferenceError: Cannot access 'b' before initialization(不可再变量声明前使用)
    let b = 2;
    
  • 典型事例

    var a = 0;
    function test() {
      console.log(a);
      var a = 2;
    }
    test(); // undefined  包含var是函数作用域 + 变量提升问题
    console.log(a);// 0 访问到的变量全局作用域下的a变量,test函数中声明的变量只作用域是当前函数内。
    // for 循环应用实例
      // var
    for(var i=0;i<5;i++){
      setTimeout(function(){
        console.log("var:" + i);
       })
    }
       // let
    for(let i=0;i<5;i++){
       setTimeout(function(){
            console.log("let" + i);
       })
    }
    

双向绑定

v-model

<div id="app">
<input v-model="message">{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:'#app',
    data:{
      message:'hello vue'
    }
  });
</script>

组件

组件是可复用的 Vue 实例,说白了就是一组可以重复使用的模板,跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment等框架有着异曲同工之妙。

  • Vue.component():注册组件
  • my-component-li:自定义组件的名字
  • template:组件的模板

组件示例

<div id="vue">   
    <ul>       
     <my-component-li>
    </my-component-li>     
 </ul>
</div>
<script type="text/javascript">     
    // 先注册组件    
    Vue.component('my-component-li', {         t
                                      emplate: '<li>Hello li</li>'    
                                     });    
    // 再实例化 Vue     var vm = new Vue({         el: '#vue'     });
</script>  

用prop传值

<script type="text/javascript">
    // 先注册组件
    Vue.component('my-component-li', {
        props: ['item'],
        template: '<li>Hello {{item}}</li>'
    });

    // 再实例化 Vue
    var vm = new Vue({
        el: '#vue',
        data: {
            items: ["张三", "李四", "王五"]
        }
    });
</script>

<div id="vue">
    <ul>
        <my-component-li v-for="item in items" v-bind:item="item"></my-component-li>
    </ul>
</div>

Axios网络通信

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

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

下面展示一个示例

  1. ​ 引入axios.min.js

  2. 写message.json

    {
      "name": "hzx",
      "age": 17,
      "job": "student"
    }
    

3.编写html

<div id="app" v-cloak>
  <p>姓名:{{user.name}}</p>
  <p>年龄:{{user.age}}</p>
  <p>工作:{{user.job}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  var app=new Vue({
    el:'#app',
    data:{
      message:'hello vue'
    },
      data(){//使用data方法不是data属性
        return{
            user:{
                name :null,
                age : null,
                job :null,

            }
        }

      },
      mounted(){//钩子函数
          axios.get("message.json").then(response => (this.user = response.data));
      }

  });
</script>

slot标签

<div id="app">
  <User>
    <Usertitle slot="Usertitle" :title="title"></Usertitle>
    <Username slot="Username" v-for="username in usernames" :name="username"></Username>
  </User>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  Vue.component("User",{
        template:'<div>\
            <slot name="Usertitle"></slot>\
            <ul>\
            <slot name="Username"></slot>\
            </ul>\
            </div>'

      });
  Vue.component("Usertitle",{
      props:['title'],
      template: '<p>{{title}}</p>'
  });
 Vue.component("Username",{
      props: ['name'],
      template: '<li>{{name}}</li>'
  });
  var app=new Vue({
    el:'#app',
    data:{
        title:"用户名单",
        usernames:["小明","小强","小鱼"],
    }
  });
</script>

自定义事件

使用 this.$emit('自定义事件名', 参数)

<div id="app">
  <User>
    <Usertitle slot="Usertitle" :title="title"></Usertitle>
    <Username slot="Username" v-for="(username,index) in usernames" :name="username" :index="index" @remove="removeName(index)" :key="index"></Username>
  </User>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  Vue.component("User",{
        template:'<div>\
            <slot name="Usertitle"></slot>\
            <ul>\
            <slot name="Username"></slot>\
            </ul>\
            </div>'

      });
  Vue.component("Usertitle",{
      props:['title'],
      template: '<p>{{title}}</p>'
  });
 Vue.component("Username",{
      props: ['name',"index"],
      template: '<li>{{name}},<button @click="remove(index)">删除</button></li>'
     ,methods: {
          remove:function (index) {
              // 这里的 remove 是自定义事件的名称,需要在 HTML 中使用 v-on:remove 的方式指派
              this.$emit("remove");
          }
     }
  });
  var app=new Vue({
    el:'#app',
    data:{
        title:"用户名单",
        usernames:["小明","小强","小鱼"],
    },
      methods:{
        removeName:function (index){
            this.usernames.splice(index,1);
        }
      }
  });
</script>

Node.js

安装

下载地址:http://nodejs.cn/download/

安装步骤无脑下一步就好了

确认nodejs安装成功:

  • cmd 下输入 node -v,查看是否能够正确打印出版本号即可!
  • cmd 下输入 npm-v,查看是否能够正确打印出版本号即可!

安装 Node.js 淘宝镜像加速器(cnpm)

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

# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org

创建一个vue项目

vue init webpack hello-vue

vue-cli

安装:

cnpm install vue-cli -g  #2.0版本
vue list   //检测是否安装成功
cnpm install @vue-cli -g # 3.0版本
@vue -V //检测是否安装成功

创建一个vue项目

vue create  项目名;
vue init webpack 项目名

image-20200317085240763

vue-router路由

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

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

安装

npm install vue-router --save-dev

简单router(路由)示例:

在components目录下创建一个vue文件名为app

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
      <!--可用tag属性来指定<router-link>渲染成什么样子-->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

在src目录下创建router目录,在这个目录下创建一个index.js

// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// path:访问路由的路径
//name :路由的名字可以,通过这个来访问这个路由
//component:所引用的组件
export default new Router({
     routes: [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
})

在main.js中添加扫描路由路径

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

import router from './router'

Vue.config.productionTip = false


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

下面我们来看个动态路由示例(也就是路径中带参数):

动态路由

export default new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})


一个“路径参数”使用冒号 : 标记。当匹配到一个路由时,参数值会被设置到 this.$route.params,可以在每个组件内使用。于是,我们可以更新 User 的模板,输出当前用户的 ID:

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

嵌套路由

/user/foo/profile              		 /user/foo/posts
+------------------+                    +-----------------+
| User             |               	| User            |
| +--------------+ |              	| +-------------+ |
| |    Profile   | |  +------------>  | |  	Posts   | |
| |              | |                	| |             | |
| +--------------+ |                	| +-------------+ |
+------------------+          		+-----------------+

通过 children来实现嵌套路由

export default new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功,
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

配置404

为了避免404这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }//`*`它会匹配不能被其他路由匹配的路径
  ]
})

重定向和路由别名

重定向

routes: [
     { path: '/index', component:index }
    { path: '/toindex', redirect: '/index' }//重定向到`/index`
  ]
  
  //redirect也可以设置路由的name
  routes: [
     { path: '/index',name:'index' component:index }
    { path: '/toindex', redirect: {name:'index'} }//重定向到`/index`
  ]

别名

“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL,而不是受限于配置的嵌套路由结构。

/index的别名是 /a,意味着,当用户访问 /a 时,URL 会保持为 /a,但是路由匹配则为 /index,就像用户访问 /index 一样。

routes: [
    { path: '/index', component: A, alias: '/a' }
  ]

语法糖集

v-on ===> @

v-bind ===> :

Q.E.D.

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

只有不断的努力才会有更大的惊喜等着你去发现!!