vue-router

vue-router的基本使用

什么路由

路由：通过互联网把信息从源头传递到目的地的活动
路由表：本质上是一个映射表，记录了数据包的指向
路由器提供了两种机制：路由和转送

• 路由决定数据包从来源到目的地的路径
• 转送将输入端的数据转移到合适的输出端

vue-router的认识

• vue-router是vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面
• 我们可以其官方网站对其学习：https://router.vuejs.org/zh/
• 在vue-router的单页面应用中，页面的路径的改变就是组件的切换

后端路由阶段

早期的网站开发整个HTML页面由服务器来渲染的

• 服务器直接生产渲染好对应的HTML页面，返回给客户端进行展示

但是一个网站，这么多页面服务器如何处理

• 一个页面有自己对应的网址，也就是URL
• URL会发送到服务器，服务器会通过正则对该URL进行匹配，并且最后交给一个Controller进行处理
• Controller进行各种处理，最终生成HTML或者数据，返回给前端
• 这就是一个IO操作

上面的这种操作最后由后端路由

• 当我们页面中需要请求不同的路径内容时，交给服务器来进行处理，服务器渲染好整个页面，并且将页面返回给客户端
• 这种情况下渲染好的页面，不需要单独加载任何的js和css，可以直接交给浏览器展示，这样也有利于SEO的优化

后端渲染的缺点:

• 一种情况是整个页面的模块由后端人员来编写和维护的
• 另一种情况是前端开发人员如果要开发页面，需要通过PHP和JAVA等语言来编写页面代码
• 而且通常情况下HTML代码和数据以及对应的逻辑会混在一起，编写和维护会非常麻烦
  

前端路由阶段

前后端分离阶段

• 随着Ajax的出现，由了前后端分离的开发模式
• 后端只提供API来返回数据，前端通过AJAX获取数据，并且可以通过JavaScript将数据渲染到页面中
• 这样做最大的优点就是前后端的责任清晰，后端专注于数据上，前端专注于交互和可视化上
• 并且当移动端（IOS/Android）出现后，后端不需要任何处理，依然使用之前的一套api即可
• 目前很多的网站依然采用这种模式
  

单页面阶段

• 其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由
• 也就是前端来维护一套路由规则

前端路由的核心是什么呢

• 改变URL，但是页面不进行整体的刷新
• 如何实现呢

HTML5的history模式：pushstate

浏览器窗口有一个history对象，用来保存浏览的历史

• length
• back() 移动到上一个访问页面，等同于浏览器的后退键
• forward()：移动到下一个访问页面，等同于浏览器的前进键
• go()：接受一个整数作为参数，移动到该整数指定的页面，移动到该整数指定的页面，比如go(1)相当于forward，go(-1)相当于back()
• pushState(）用来在浏览历史中添加记录，接受三个参数,
  • state ：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数，如果不需要这个参数，此处可以填null
  • title：新页面的标题，但是所有浏览器目前忽略这个值，因此这里填null
  • url：新的网址，必须与当前页面处在同一个域，浏览器的地址栏将显示这个网址
  • history.pushstate({},’’,‘foo’)，浏览器地址栏立刻显示http://localhost:8080/foo;但并不会跳转到foo，甚至也不会检查foo是否存在，它只是成为浏览历史中的最新记录。总之，pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应

hash

location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url。
location.hash则可以用来获取或设置页面的标签值

location.hash='aaa'

location.href和location.hash的区别

1. window.location.href

• 得到和使用的是完整的url，比如window.location.href="www.baidu.com”表示的是重新定向，页面跳转到新的页面。也可以通过window.location.href得到a标签的完整的href，比如如果使用href，那么可以得到完整的链接（url）

2. window.location.hash

• 得到的是锚链接。相比如href,通过window.location.hash并不会跳转到新的链接，只会在当前链接里面改变锚链。并且如果有通过window.location.hash得不到完整的链接（URL），仅仅得到#book.

安装和使用vue-router

• router-link该标签是一个vue-router中已经内置的组件，它会被渲染成一个a标签
• router-view该标签会根据当前的路径，动态渲染出不同的组件
• 网页的其他内容，比如顶部的标签/导航，或者底部的一些版权信息等会和router-view处于一个等级
• 在路由切换时，切换的是router-view挂载的组件，其他内容不会发生改变

步骤：

1. 安装vue-router， npm install vue-router --save

2. 导入路由对象，并且调用vue.use(vuerouter)
   
   use函数会调用VueRouter的install

3. 创建路由实例，并且传入路由映射设置
   

4. 在vue实例中挂载创建的路由实例
   
   
   router/index.js

///router/index.js**
import VueRouter from 'vue-router'
import Vue from 'vue'
import Home from '../components/Home'
import About from '../components/About'


//1 通过vue.use（插件）， 安装插件
Vue.use(VueRouter)

//2 创建vuerouter实例

const routes =[
    {
   
        path:'/home',
        component:Home
    },
    {
   
        path:'/about',
        component:About
    }


];
//需要传入RouterOptions对象
//在RouterOptions对象中需要传入routes属性值，是一个数组
const router = new VueRouter({
   
    routes
})

//3 将router实例传入到vue实例中
export default router

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.
///main.js*
import Vue from 'vue'
import App from './App'
import router from './router/index'

Vue.config.productionTip = false

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

///App.vue

///App.vue
<template>
  <div id="app">
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <!-- <Home></Home> -->
    <!-- 在那里显示 -->
    <router-view></router-view>

  </div>
</template>

<script>

import Home from './components/Home.vue'
import About from './components/About.vue'

export default {
   
  name: 'App',
  components: {
   
    Home
  }
}
</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>

路由的默认路径

默认情况下，进入网站的首页，我们希望router-view渲染首页的内容。可以redirect实现

配置解析：
我们在router中又配置了一个映射
path配置的是根路径
redirect是重定向，也就是我们将路径重定向到/home的路径下

去除#改变路由和组件之间的应用关系

改变路径的两种方式：

• URL的hash
• HTML5的history
• 默认情况下，路径的改变使用URL的hash
• 如果希望使用HTML5中的history模式，非常简单，进行如下配置就可以

在VueRouter实例中添加mode

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

改变router-link的标签

router-link中的属性

• tag：tag可以指定router-link之后渲染成什么组件，比如下面的代码会渲染成button而不是a

    <router-link to="/home" tag="button">Home</router-link>
    <router-link to="/about" tag="button">About</router-link>

• replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中
  
• active-class :当router-link对应的路径匹配成功时，会自动给当前的元素设置一个router-link-active的class，设置active-class可以修改默认的名称
  • 在进行高亮显示的导航菜单或者底部tabbar时，会使用到该类
  • 但是通常不会修改类的属性，会直接使用默认的router-link-active即可

<template>
  <div id