【Vue】Re14 Router 第一部分(入门案例)

一、箭头函数（Lambda匿名函数）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script type="text/javascript">

    /* 创建函数一 */

    const aaa = function () {

        // todo ....

    };

    const object = {

        /* 创建函数二 */

        bbb : function () {

            // todo ...

        },

        /* 创建函数三 */

        ccc () {

            // todo ...

        }

    };

    /* 创建函数四 */

    const ddd = () => {

        // todo ...

    };

    /**

     * 箭头函数可理解为Lambda表达式，亦可称为匿名表达式，或者匿名函数

     * 函数不再具有名称，只留下参数和函数逻辑，

     * 可以调用和声明一体式编写

     *

     * 语法Syntax

     * const fun = (参数列表) => {

     *     // todo ...

     * }

     *

     * 无参箭头函数

     * const fun2 = () => { // todo ... }

     *

     * 一个参数

     * const fun2 = (param) => { // todo ... with param }

     * 可以缩写，不需要括号

     * const fun2 = param => { // todo ... with param }

     *

     * 多参数

     * const fun2 = (param1, param2) => { // todo ... with params }

     *

     *

     * 如果函数逻辑只有一行语句，可以不需要大括号

     * 一行语句

     * const oneLine = (n1, n2) => {

     *     return n1 + n2 ;

     * }

     * 直接缩写成

     * const oneLine = (n1, n2) => n1 + n2 ; // 省略函数体与return关键字

     */

     // 箭头函数与this关键字的问题

     const object2 = {

        method1 () {

            setTimeout(function () {

                console.log(this); // 这个this是window对象

            }, 1000);

            setTimeout(() => console.log(this), 1000); // 这个this是这个object2对象

        }

     }

     object2.method1();

     // 结论：箭头函数会向外层作用域中一层层查找this，直到This定义并引用this对象【也就是查找最近的this对象】

</script>

</body>

</html>

二、创建案例环境

先使用Vue2方式进行创建：

三、路由概述

路由更像是音译过来的词语 Routing

维基百科给出的解释是：

通过互联网把信息从源地址传输的目的地址的活动

生活概念：路由器

两种机制：路由和转送

路由决定数据包从来源到目的地的路径

转送将输入端的数据转移到合适的输出端

路由表的概念

本质是一个映射表，决定了数据包的指向

四、前端渲染 & 后端渲染

1、网页发展阶段历史：

第一阶段：后端渲染

jsp\php\asp\

html + css + javascript

页面跳转由后端的控制器实现

第二阶段：前后端分离

ajax 技术实现

数据转API传输，维护方便

还是多个页面组成处理

第三阶段：SPA

单页面应用

详细说明：

https://www.bilibili.com/video/BV15741177Eh?p=100

2、URL的Hash & H5的History

首先运行之前创建的案例项目

npm run dev

我们清空浏览器的请求资源再次更改会发现，网页只更新了favicon.icon

其他资源不发生请求，但是URL地址发生了变化

使用HTML5的History对象操作也是一样可以的

pushState是类似压栈的形式操作url

可以使用back回退上一个url，push和back相当于压栈和弹栈的关系

也可以使用fowward

但是使用replaceState跳转，是无法回退的

如果不希望一个一个的回退，可以使用go回退指定索引的url

五、Vue - Router

安装

之前已经在创建案例项目时勾选了router安装，

如果没有也没关系，使用命令进行手动安装

npm install vue-router --save

使用

1、导入路由，调用Vue.use注入


2、创建路由实例，传入映射配置


3、在实例中挂在路由实例

这个router目录就是创建项目时自动生成的

里面的index.js文件：

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/',

      name: 'HelloWorld',

      component: HelloWorld

    }

  ]

})

path表示url路径

name表示路由名称

component表示挂载的组件

不过我们一般的写法会进行拆分解耦，这样解析步骤：

/* 1、 首先引用Vue依赖 */

import Vue from "vue/types/vue";

/* 2、 然后是VueRouter */

import VueRouter from "vue-router";

/* 3、 调用Vue.use方法注册VueRouter */

Vue.use(VueRouter);

/* 4、配置需要的路由映射 */

const routerList = [

  /* 配置映射关系 url -> component */

]

/* 5、创建VueRouter实例 */

const router = new VueRouter({

  routes : routerList

});

/* 6、把此router实例挂载到Vue实例中，所以需要导出 */

export default router;

配置映射关系：

第一个案例项目就作为模板保留

创建第二个案例项目，把router目录的index.js文件换成上面的内容【router/index.js】

import Vue from 'vue';

import Router from 'vue-router';

Vue.use(Router);

const routerList = [

]

const router = new Router({

  routes : routerList

});

export default router;

移除components的Helloworld.vue组件文件

移除App.vue的标签：

<template>

  <div id="app">

    <img src="./assets/logo.png">

    <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>

创建Home组件

<template>

  <div>

    <h3>这是首页Home组件</h3>

    <p>首页Home组件的内容</p>

  </div>

</template>

<script>

export default {

  name: "Home"

}

</script>

<style scoped>

</style>

创建About组件

<template>

  <div>

    <h3>这是关于About组件</h3>

    <p>关于About组件的内容</p>

  </div>

</template>

<script>

export default {

  name: "About"

}

</script>

<style scoped>

</style>

配置路由：

import Vue from 'vue';

import Router from 'vue-router';

import Home from "../components/Home";

import About from "../components/About";

Vue.use(Router);

const routerList = [

  {

    path : '/home', /* 为什么这里是path不是url？ 因为完整的url还包括 项目根url（协议头 + 域名（或者IP地址） + 端口号 + 项目根名称路径（可选））  */

    name : 'home', /* 名字可以不加 */

    component : Home

  },

  {

    path : '/about',

    name : 'about',

    component : About

  },

]

const router = new Router({

  routes : routerList

});

export default router;

App.vue配置路由标签

<template>

  <div id="app">

    <router-link to="/home">去首页</router-link>

    <router-link to="/about">去关于</router-link>

  </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>

运行预览后可以发现其实link标签就是a标签

但是为什么没有显示出来，原因是因为我们还没写view标签

<template>

  <div id="app">

    <router-link to="/home">去首页</router-link>

    <router-link to="/about">去关于</router-link>

    <router-view></router-view>

  </div>

</template>

上面的URL地址可以看到是

#/home

这种#加路径就是hash的路由方式