Vue2笔记(五)Vue-Router

Vue Router

什么是前端路由

一、路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动.

路由器提供了两种机制: 路由和转送.
路由是决定数据包从来源到目的地的路径.
转送将输入端的数据转移到合适的输出端.

路由中有一个非常重要的概念叫路由表.
路由表本质上就是一个映射表, 决定了数据包的指向.

二、前端渲染和后端渲染
1、后端渲染
如jsp,后端渲染好网页再传给前端

2、后端路由
后端处理url和页面之间的映射关系

3、前后端分离
后端只负责提供数据，不负责任何阶段的内容
ajax出现后出现的前后端分离模式
后端只提供api来返回数据，前端通过ajax获取数据，并且可以通过JavaScript将数据渲染到页面
ios和android出现后，后端不需要进行任何处理，依然使用之前的一套api即可

4、前端渲染
浏览器中显示的网页中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的网页。

5、单页面富（SPA）应用阶段
在前后端分离的基础上加了一层前端路由
也就是前端来维护一套路由规则
整个网站只有一个html页面

三、url的hash和html的history

前端路由的核心：改变url，但是页面不进行整体的刷新

1、依靠改变url的hash实现

​ URL的hash也就是锚点(#), 本质上是改变window.location的href属性.
​ 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新

2、Html5的history.pushState（）实现

 history.pushState({
   },'','home')

3、Html5的history.replaceState（）实现

由于是替换，所以，无法再浏览器中返回

4、Html5的history.go（）实现

此外还有
history.go（n）：
history.back（）：等价于history.go（-1）
history.forward（）：等价于history.go（1）

路由的基本配置

路由的安装

npm install vue-router --save

使用步骤

1.创建路由组件
在组件文件夹中创建Home.vue和About.vue组件模板
Home.vue

<template>
<div>
  <h2>我是首页</h2>
  <h4>我是首页内容,哈哈哈哈</h4>
</div>
</template>

<script>
export default{
  name:"Home"//模板名称
}
</script>

<style>
</style>

About.vue

<template>
<div>
<h2>我是关于</h2>
  <h4>我是关于页的内容,呵呵呵呵</h4>
</div>
</template>

<script>
export default{
  name:'About'//模板名称
}
</script>

<style>
</style>

2.配置组件和路径的映射关系

在router目录下的index.js中进行配置
要先导入home和about两个组件模板
创建router对象数组

import Vue from 'vue'
import Router from 'vue-router'
//导入home和about两个模板文件
import Home from '../components/Home'
import About from '../components/About'
//1、通过Vue.use（插件），安装插件
Vue.use(Router);

//2、创建Router对象
const routes = [
  //一个对象就是一个映射关系
  {
   
    path: '/home',//路径对应根/home
    component:Home
  },
  {
   
    path: '/about',//路径对应根/about
    component:About
  }
];

const router = new Router({
   
  routes
});

export default router;

3.使用路由

main.js引入

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

Vue.config.productionTip = false

new Vue({
   
  el: '#app',
  router,
  render: h => h(App)
})

通过和
在App.vue模板文件中插入刚才创建并配置好的路由组件
router-link是vue默认的全局组件，可以只接拿来使用

和用来控制切换
同时添加to属性，指向各模板文件对应的路径
用于显示切换过来的自定义组件（home和about）

App.vue

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>

  </div>
</template>

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

<style> 
</style>

细节处理

路由的默认路径和history

让路径默认跳转到首页，并且router-view渲染首页文件
只要多配置一个映射即可

 //设置默认首页
const routes ={
   
    path: '/',
    component:Home
  }
// 但更简洁的方式是使用重定向到/home映射上去
const routes = {
   
    path: '/',
    redirect:'/home'
  }

在index.js中直接修改路由的配置模式为history（不显示路径中的#）

const router = new Router({
   
  routes,
  //配置浏览器地址栏模式
  mode:'history'
});

export default router;

router-link补充

还有一些其他属性:
tag: tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个

• 元素, 而不是
  replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
  active-class: 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称.

• <router-link to="/home" tag="button" replace active-class="active">首页</router-link>
  

  修改linkActiveClass的名称

  在index.js中修改

  const router = new VueRouter({
       
  
   *// 配置路由和组件之间的应用关系*
  
   routes,