Vue学习12箭头函数/vue router

ES6中的肩头函数：

const cc = (参数列表)=>{}

　　例如：一个参数的时候括号可以省略掉

const power = num =>{
    return num*num
}

　　函数中没有参数的时候

const test = () =>{
    console.log('hello world")
}

　　函数中还有一行代码的时候：

const mul = (num1,num2)=>num1 * num2

　　什么时候用箭头函数比较多？打算把一个函数作为另外一个函数参数的时候一般会使用箭头函数。

　　箭头函数中的this引用的最近作用域中的this。也就是说使用：

aaa(){
　　settimeout（function（）｛console.log(this)｝）
｝

　　这里的this指window，但是箭头函数中的this会指向上一层作用域的内容，这里替换后指向obj。

 

　　重要的知识点来了，前端路由vue-router：

　　路由是个啥？就是把信息从原地址传输到目的地址。别人给你发送一条信息，是通过一个公网ip发送到你的路由器的位置，然后从路再进行一次转发，但是路由如何确定发给谁呢，就通过映射表，映射表里面有内网ip对应的电脑的mac地址。因为映射表的存在路由具有两个功能：决定数据包从来源到目的地的路径，转送输入端的数据到合适的输出端。

　　一个页面有自己的对应的网址URL，发送到服务器后通过对URL匹配交给Controller处理，Controller进行处理后生成html返回给前端完成了一个IO操作，这个就是后端路由。这样后端也要写前端的代码。

　　前后端分离就是：后端负责提供数据，不负责任何阶段的内容。这也就是前端渲染.

 

　　通过启动测试的项目，然后在浏览器的console中输入：

　　

 

 　　这样我们更新了网页的url而且网页并没有进行刷新。hash的改变是前端的操作。或者通过history修改这个对象

 

 　　这样网站也不会刷新并且添加了url。这个说白了就是个栈，你要是push好几个还可以用history.back来返回上一个。如果使用history.replace则也可以改url但是不能返回。history.go(-1) 和back效果是一样的。

　　vue-router就是可以通过url来渲染组件。

　　router中index.js用来配置一个路由信息，先导入路由的包：

import VueRouter from ‘vue-router’
import Vue from ‘vue’

　　通过Vue.use来安装插件

Vue.use(VueRouter)

　　创建一个路由对象：

const routes=[]
const router = new VueRouter({
   routes 
})

　　然后为了能在main中使用需要在这个文件里导出然后在main中导入：

　　

 

下面是main.js中

 

 　　所以生成的代码就是这些意思。

　　那么如何配置路由的映射关系呢？

　　1.创建一个路由组件 2.配置路由映射 3.使用路由

　　首先我们先创建一个路由组件：

 

 　　这个是About.vue中的内容，同时我们创建另一个Home.Vue内容和这个一样的只是文字显示的是首页。这样我们路由的组件就创建完了一会就显示他俩。

　　然后我们配置路由映射，既然是配置那么就在router中的index配置一下：

　　引包：

 

 　　配置：

　　

 

 　　可以看到并没有增加太多的东西，就是path后面跟上url要增加的信息，然后告诉路由path变动后显示哪一个组件，这里分别显示Home组件和About组件。

 　　最后使用路由，这里肯定是在首页上使用，我们在App.vue中：

 

 　　router-link标签中的to对应path内容，然后一定要放置下面的router-view标签，这个标签决定内容在哪里显示，效果如下：

　　

 

 　　点击就可以切换了，可以看到url中的内容也改变了。

 

　　那么我们希望主页的内容应该是默认显示的，而不是点击一下才能显示，这时候需要设置一个重定向：在配置路由的地方我们添加一个：

　　

 

 　　第一个就是我们新添加的重定向，也就是默认重定向到home，/代表根路径。这样就实现了。再改一下url的模式，模式改成history这样不是显示hash模式了，那样看起来太傻了。

 　　

 

 　　这回就像个url了没井号了。

 　　router-link的补充：

　　增加一个tag属性可以更改渲染之后的标签是什么标签。

　　

 

 　　

 

 　　不希望用户进行返回，添加一个repalce属性

　　

 

 　　添加active-class="active"，可以修改css样式：

　　

 

　　效果：

 　　

 

 　　通过点击按钮进行改变的方法：

　　先设置两个按钮：

    <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>

　　然后对应函数设置上：

export default {
  name: 'App',
  methods:{
    homeClick(){
      this.$router.replace('/home').catch(err=>{err})
    },
    aboutClick(){
      this.$router.replace('/about').catch(err=>{err})
    }
  }
}

　　这里通过this.$router.replace来更改了路径，this代表当前组件，$router是一个属性源自vue-router的源码里面，所有的组件都加入了这个$router的属性，这个属性还有push()方法或者replace方法一类的，这样你点击就可以跳转了。这样其他标签也是可以的。