route

1、 传统web应用vs单页面web应用

1.1、传统web应用

传统web应用，又叫做多页面web应用：核心是一个web站点由多个HTML页面组成，点击时完成页面的切换，因为是切换到新的HTML页面上，所以当前页面会全部刷新。

1.2、单页面web应用（SPA：Single Page web Application）

整个网站只有一个HTML页面，点击时只是完成当前页面中组件的切换。属于页面局部刷新。

单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。单页面的跳转仅刷新局部资源。因此，对单页应用来说模块化的开发和设计显得相当重要。

1.3、单页面应用的优缺点：

1.3.1、单页面应用的优点

1、提供了更加吸引人的用户体验：具有桌面应用的即时性、网站的可移植性和可访问性。

2、单页应用的内容的改变不需要重新加载整个页面，web应用更具响应性和更令人着迷。

3、单页应用没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象

4、单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。

5、良好的前后端分离。后端不再负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端

1.3.2、单页面应用的缺点：

1、首次加载耗时比较多。

2、SEO问题，不利于百度，360等搜索引擎收录。

3、容易造成CSS命名冲突。

4、前进、后退、地址栏、书签等，都需要程序进行管理，页面的复杂度很高，需要一定的技能水平和开发成本高。

1.3.3、单页面和多页面的对比

目前较为流行的是单页面应用的开发。

如果想使用Vue去完成单页面应用的开发，需要借助Vue当中的路由机制。

2、 路由route与路由器router

1、路由：route

2、路由器：router

路由器用来管理/调度各个路由

对于一个应用来说，一般路由器只需要一个，但是路由是有多个的

3、每一个路由都由key和value组成。

key是路径，value是对应的组件

key1+value1===>路由route1

key2+value2===>路由route2

key3+value3===>路由route3

......

4、路由的本质：一个路由表达了一组对应关系。

5、路由器的本质：管理多组对应关系。

3、 使用路由

3.1、创建组件

app.vue

<template><div class="app"><MyHeader class="myheader" title="首页" /><Home class="mycontent" /><Myfooter class="myfooter" /></div>
</template><script>
import MyHeader from './components/MyHeader.vue'
import Myfooter from './components/Myfooter.vue';
import Home from './components/home.vue';
export default {name: 'App',components: {MyHeader,Myfooter,Home}
}
</script><style>
* {margin: 0;padding: 0;
}.app {width: 375px;height: 667px;display: flex;flex-direction: column;margin: 30px auto;
}.myheader,
.myfooter {width: 100%;line-height: 50px;background-color: gainsboro;display: flex;align-items: center;
}.myheader {justify-content: space-between;
}.myfooter {justify-content: space-around;
}.mycontent {width: 100%;flex-grow: 1;background-color: pink;
}
</style>

MyHeader.vue

<template><div class="myheader"><button>返回</button><h3>{{ title }}</h3><button>详情</button></div>
</template><script>
export default {name:'MyHeader',props:['title']}
</script><style scoped>
button{width: 70px;height: 40px;
}</style>

MyFooter.vue

<template><div><a href="#" v-for="nav in navList" :key="nav">{{ nav }}</a></div>
</template><script>
export default {name: 'MyFooter',data() {return {navList: ['首页', '新闻', '购物车', '我的']}},}
</script><style></style>

Home.vue

<template><div>home</div>
</template><script>
export default {name:''}
</script><style></style>

3.2、安装路由vue-router

(1) vue2 要安装 vue-router3

① npm i vue-router@3

(2) vu3要安装vue-router4

① npm i vue-router@4

如果报错

npm i vue-router@3 --legacy-peer-deps

3.3、配置vue-router环境并使用

main.js

import Vue from "vue";
import App from "./App.vue";Vue.config.productionTip = false;
// 导入路由器对象
import router from "./router";const vm = new Vue({render: (h) => h(App),// 一旦使用了vue-router插件，那么new Vue的时候就可以直接传递一个配置项// 注册路由器对象router
}).$mount("#app");
console.log(vm);

在src目录下，新建一个router文件夹，新建index.js,配置路由器对象，并暴露

第一步:配置路由关系

// 导入Vue
import Vue from "vue";
// 导入VueRouter
import VueRouter from "vue-router";
// 注册VueRouter
Vue.use(VueRouter)// 导入路由组件
import Home from "@/views/home.vue";
import News from "@/views/news.vue";
import Car from "@/views/car.vue";
import My from "@/views/my.vue";const router=new VueRouter({// 配置路由规则  配置一组组路由关系，// 每一组路由关系都是一个对象：// key：路径==>path// value：组件==>componentroutes:[{path:'/home',//注意要以/开头component:Home},{path:'/news',component:News},{path:'/car',component:Car},{path:'/mine',component:My},]})export default router

第二步：使用路由关系

MyFooter.vue

<template><div><!-- 第二步：routerlink的to属性，配置好路由关系 --><!-- to 配置路由路径 ，点击时会跳到对应路径的路由组件--><router-link :to="nav.path" v-for="nav in navList" :key="nav.name">{{ nav.name }}</router-link><!-- <a href="#" >{{ nav }}</a> --></div>
</template><script>
export default {name: 'MyFooter',data() {return {navList: [{name: '首页',path: '/home',},{name: '新闻',path: '/news',},{name: '购物车',path: '/car',},{name: '我的',path: '/mine',},]}},}
</script><style></style>

第三步：路由组件显示

app.vue

<template><div class="app"><MyHeader class="myheader" title="首页" /><!-- <Home class="mycontent" /> --><!-- 第三步：告诉路由器，路由组件显示的位置 --><div class="mycontent"><!-- 告诉路由器，路由组件显示在这个位置 --><router-view /></div><Myfooter class="myfooter" /></div>
</template>

注意事项：

① 路由组件一般会和普通组件分开存放，路由组件放到pages或views目录，普通组件放到components目录下。

② 路由组件在进行切换的时候，切掉的组件会被销毁，可用destroyed生命周期钩子证实

③ 路由组件的两个属性：$route和$router

1) $route：属于自己的路由对象。

2) $router：多组件共享的路由器对象。

3.4、小功能：

点击底部导航，顶部title部分随着进行更新，这里用到了兄弟传参，还要在本地保存一份，解决刷新，title初始化的问题，

注意：router-link上不能绑定点击事件，不生效

myfooter.vue

<template><div><!-- 第二步：routerlink的to属性，配置好路由关系 --><!-- to 配置路由路径 ，点击时会跳到对应路径的路由组件--><router-link :to="nav.path" v-for="nav in navList" :key="nav.name" active-class="active"><span @click="sendTilte(nav.name)">{{ nav.name }}</span></router-link><!-- <a href="#" >{{ nav }}</a> --></div>
</template><script>
export default {name: 'MyFooter',data() {return {navList: [//·····]}},methods: {sendTilte(name) {this.$bus.$emit('handlerSendTilte', name)localStorage.setItem('title',name)}}}
</script>

myheader.vue

<template><div class="myheader"><button>返回</button><h3>{{ title }}</h3><button>详情</button></div>
</template><script>
export default {name: 'MyHeader',data() {return {// 初始化数据从本地拿取title: localStorage.getItem('title')||'首页'}},mounted() {this.$bus.$on('handlerSendTilte', (name) => {this.title = name})}
}
</script>

4、 多级路由

第一步：创建好二级路由组件

第二步：router/index.js配置好二级路由关系

//....import Hot from "@/views/home/hot.vue";import Agree from "@/views/home/agree.vue";import More from "@/views/home/more.vue";const router = new VueRouter({// 配置路由规则  配置一组组路由关系，// 每一组路由关系都是一个对象：// key：路径==>path// value：组件==>component// 第一步：配置好路由关系：key--valueroutes: [{path: '/home',//注意要以/开头component: Home,// children配置项，配置二级路由children: [{// path写法一:路径完整// path:'/home/hot',//二级路由路径// path写法二：直接写路径名，不能加/path: 'hot',component: Hot//二级路由},{path: 'agree',component: Agree},{path: 'more',component: More}]},//·····

第三步：routerLink使用

src/views/home/index.vue

<template><div><!-- 轮播图 --><div class="swiper">轮播图</div><!-- 二级导航 --><div class="subNav"><!-- 二级路由在使用时，必须把路径写完整 --><router-link to="/home/hot"><h5>正在热卖</h5></router-link><router-link to="/home/agree"><h5>值得推荐</h5></router-link><router-link to="/home/more"><h5>查看更多</h5></router-link></div>//·····

第四步：设置二级路由显示位置

<template><div><!-- 轮播图 --><div class="swiper">轮播图</div><!-- 二级导航 --><div class="subNav">//·····</div><!-- 路由组件显示位置 --><div><router-view /></div></div>
</template>

5、 路由起名字

可以给路由起一个名字，这样可以简化to的编写，且后期我们在prams传参，需要用到name

第一步：在路由关系中，添加name的配置

 {path: 'agree',component: Agree,name: 'agree'},

第二步：使用name，简化to的写法

  <!-- 二级导航 --><div class="subNav"><!-- 二级路由在使用时，必须把路径写完整 --><!-- to的写法一 --><!-- <router-link to="/home/hot"> --><!-- to的写法二 --><!-- <router-link :to="{path:'/home/hot'}"> --><!-- to的写法三 --><router-link :to="{ name: 'hot' }"><h5>正在热卖</h5></router-link><router-link to="/home/agree"><h5>值得推荐</h5></router-link><router-link to="/home/more"><h5>查看更多</h5></router-link></div>

6、 路由query传参

为了提高组件的复用性，可以给路由组件传参

传递参数：哪里点击跳转，在哪里传参数

需求：根据电影列表信息，点击不同的电影，查看不同的详情页面

第一步：配置好详情页组件

views/detail.vue

<template><div><h1>detail</h1></div>
</template><script>
export default {// 接收传递参数mounted(){// 当前的路由信息console.log(this.$route.query,'route');}
}
</script><style></style>

第二步：router/index.js

routes: [{//路由重定向path: '/',//初始路径redirect: '/home/hot'},{path:'/detail',name:'detail',component:Detail},//·····

第三步：传递参数，哪里点击，哪里传递

<template><div><ul><li v-for="film in films" :key="film.filmId"><!-- query传参to="/路由路径?参数名=参数值&参数名=参数值"--><!-- 1、传递静态参数 --><!-- <router-link  to="/detail?filmId=123" class="film"> --><!-- 2、传递从data中读取的参数 --><!-- <router-link  :to="`/detail?filmId=${num}`" class="film"> --><!-- 3、传递遍历的参数 --><!-- <router-link :to="`/detail?filmId=${film.filmId}&num=${num}`" class="film"> --><!-- 4、以对象的方式传递参数 --><router-link :to="{// path: '/detail',name: 'detail',query: {filmId: film.filmId,num: num}}" class="film"><img :src="film.poster" alt="" style="width: 100px;">{{ film.name }}</router-link></li></ul></div>
</template>

第四步：拿取数据

拿到detail组件的路由 this.$route.query ,里面就有传递的参数

<template><div><h1>detail：{{ filmId }}</h1></div>
</template><script>
export default {data() {return {filmId: ''}},// 接收传递参数mounted() {// 当前的路由信息console.log(this.$route.query, 'route');this.filmId = this.$route.query.filmIdconsole.log(`通过filmId：${this.filmId}请求数据，进行展示`);}
}
</script>

7、 路由params传参

第一步：新建好detail组件，并配置好路由关系

如果是采用to传递字符串的形式拼接参数： to='路径名/参数1/参数2' ，必须在route/index.js中路径处进行占位

{// params传递，必须在路由后进行参数占位path:'/detail/:filmId/:num2',name: 'detail',component: Detail},

如果是to传递对象的形式：可以不占位

{// params传递，必须在路由后进行参数占位// path:'/detail/:filmId/:num2',// 如果是对象的形式传参，就不需要占位path: '/detail',name: 'detail',component: Detail},

第二步：传递参数

哪里点击，哪里传递参数

<template><div><ul><li v-for="film in films" :key="film.filmId"><!-- params传参to='路径名/参数1/参数2' --><!-- 1、传递静态数据 --><!-- <router-link to="/detail/123/456" class="film"> --><!-- 2、传递动态的数据 --><!-- <router-link :to="`/detail/${film.filmId}/456`" class="film"> --><!-- 3、传递参数：对象的形式，不能用path，必须用name --><router-link :to="{// path: '/detail',name: 'detail',params: {filmId: film.filmId,num2: 456}}" class="film"><img :src="film.poster" alt="" style="width: 100px;">{{ film.name }}</router-link></li></ul></div>
</template>

第三步：detail组件接收参数

拿到当前组件的路由关系：this.$route.params

<template><div><h1>detail：{{ filmId }}</h1></div>
</template><script>
export default {data() {return {filmId: ''}},// 接收传递参数mounted() {// 当前的路由信息console.log(this.$route.params);this.filmId=this.$route.params.filmId// console.log(`通过filmId：${this.filmId}请求数据，进行展示`);}
}
</script>

8、 路由的props

props配置主要是为了简化query和params参数的接收。让插值语法更加简洁。

哪个组件接收参数，就在哪个组件路由关系中配置props

三种写法：对象，函数，布尔值写法

// 创建路由器对象（在路由器对象中配置路由）
const router = new VueRouter({routes: [// 路由1{name: "sub1",path: "/subject1/:a1/:a2/:a3",component: subject,//第一种写法，对象的写法。只能传递固定值// props: { //   x: "章三",//   y: "李四",//   z: "王二麻",// },//第二种写法：函数式，这里的$route就是当前路由// props($route) {//   return {//     a1: $route.params.a1,//     a2: $route.params.a2,//     a3: $route.params.a3,//   };// },//第三种写法：直接将params方式收到的数据转化为props，这种方式，只针对params传参props:true },{name: "sub2",path: "/subject2/:a1/:a2/:a3",component: subject,},],
});
// 暴露路由器对象
export default router;

subject.vue props接收，直接可以使用

<template><div><ul class="web"><li>{{ a1 }}</li><li>{{ a2 }}</li><li>{{ a3 }}</li></ul></div>
</template><script>
export default {name: 'web',// 接收路由器中配置的props，简写插值语法的写法//props: ['x', 'y', 'z']props: ['a1', 'a2', 'a3']
}
</script>
<style>
.web {background-color: pink;
}
</style>

9、 router-link的replace属性

9.1、栈数据结构，先进后出，后进先出原则

9.2、浏览器的历史记录是存储在栈这种数据结构当中的。包括两种模式：

(1) push模式（默认的）

(2) replace模式

(3) 如何开启replace模式：

a.<router-link :replace=”true”/>

b. <router-link replace />

10 、编程式路由导航

需求中可能不是通过点击超链接的方式切换路由，也就是说不使用如何实现路由切换。

这种方式，我们叫声明式的路由导航

通过编写代码，完成路由组件的切换，这种方式我们呢交编程式路由导航

声明式路由导航可以通过相关API来完成：

(1) push模式：

this.$router.push({

name : ‘’,

query : {}

})

(2) replace模式：

this.$router.replace({

name : ‘’,

query : {}

})

(3) 前进：

this.$router.forward()

(4) 后退：

this.$router.back()

(5) 前进或后退几步：

this.$router.go(2) 前进两步

this.$router.go(-2) 后退两步

(6) 使用编程式路由导航的时候，需要注意：

重复执行push或者replace的API时，会出现以下错误：

这个问题是因为push方法返回一个Promise对象，期望你在调用push方法的时候传递两个回调函数，一个是成功的回调，一个是失败的回调，如果不传就会出以上的错误。所以解决以上问题只需要给push和replace方法在参数上添加两个回调即可。

<button @click="$router.forward()">前进</button>
<button @click="$router.go(1)">go-1</button>
<button @click="$router.go(2)">go-2</button>
<button @click="$router.back()">返回</button>
<button @click="$router.go(-1)">go-1</button>
<button @click="$router.go(-2)">go-2</button>
<button @click="goDetail(film.filmId)">跳转详情页</button>
//····goDetail(filmId) {//有历史记录this.$router.push({// path:'/detail',name: 'detail',params: {filmId: filmId,num2: 456},query: {filmId: filmId,num2: 456}}, () => { }, () => { })// 没有历史记录// this.$router.replace({//   // path:'/detail',//   name: 'detail',//   params: {//     filmId: filmId,//     num2: 456//   }// }, () => { }, () => { })}

11、 缓存路由组件

默认情况下路由切换时，路由组件会被销毁。有时需要在切换路由组件时保留组件（缓存起来）。

<keep-alive>//会缓存所有的路由组件

<router-view/>

</keep-alive>

通过添加以下3种属性，控制路由组件的缓存

include - 字符串或正则表达式或变成动态的属性，解析数组。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式或变成动态的属性，解析数组。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

注意：router.js 中的name和vue组件的name需要保持一致

<div class="mycontent"><!-- 告诉路由器，路由组件显示在这个位置 --><!-- 1、只想news组件被缓存，其他组件切换时，还是被销毁  include--><!-- 2、除了car组件，其他组件都被销毁 exclude --><!-- <keep-alive include="news"> --><!-- <keep-alive :include="['news']"> --><keep-alive :exclude="['news']" ><router-view /></keep-alive></div>

12 activated和deactivated

对于普通的组件来说，有8个生命周期函数，对于路由组件， 除了常规的8个，额外还有2个，

<keep-alive>包裹的路由组件，该组件有两个特有的生命周期函数：activated和deactivated。

activated在路由组件被激活时触发；

deactivated在路由组件失活时触发。

这两个钩子函数的作用是捕获路由组件的激活状态。

<template><div><ul class="web"><li><input type="checkbox">html</li><li><input type="checkbox">css</li><li><input type="checkbox">js</li></ul></div>
</template><script>
// 需求：当组件切换到subject1的时候，每隔1s，输出一句话‘工作中····’
// 当组件切走时，输出‘休息中····’,并解除定时器
// 正常情况下，这个功能可以用mounted和beforeDestroy去完成，但当subject1组件用keep-alive保持激活时，
// 就必须使用activated和deactivated组件了
export default {name: 'subject1',// mounted() {//     this.timer = setInterval(() => {//         console.log('工作中····');//     }, 1000)// },// beforeDestroy() {//     console.log('休息中···');//     clearInterval(this.timer)// }// activated() {this.timer = setInterval(() => {console.log('工作中····');}, 1000)},deactivated() {clearInterval(this.timer)console.log('休息中');}
}
</script>
<style>
.web {background-color: pink;
}
<

13、 路由守卫

1、面试：有哪些路由守卫？

2、实际开发过程中，重点全局前置守卫

不同的守卫其实就是在不同的时机，不同的位置，添加鉴权（鉴别权限）代码

13.1 全局前置守卫

需求：只有当用户是admin时，允许切换到subject2路由上

1、书写位置：在创建好router之后，以及暴露router之前

2、执行时机：beforeEach()中传入一个回调函数callback，可以是普通函数或箭头函数都可以，在初始化时执行一次，然后每一次在切换任意组件之前都会被调用

router.beforeEach((to, from, next)=>{ // 翻译为：每次前（寓意：每一次切换任意路由之前执行。）

// to 去哪里(to.path、to.name)

// from 从哪来

// next 继续：调用next( )

})

3、callback函数有3个参数：to from next

from参数：from是一个路由对象，表示从哪里来（从那个路由切过来的），起点

to参数：to也是一个路由对象，表示到哪里去，终点

next参数：是一个函数，调用这个函数之后，表示放行，可以继续向下走

4、给路由对象添加自定义属性的话，需要在路由对象的meta（路由元）中定义

如果路由组件较多。to.path会比较繁琐，可以考虑给需要鉴权的路由扩展一个布尔值属性，可以通过路由元来定义属性：meta:{isAuth : true}

// 创建路由器对象(配置一个个路由)
// 导入vue-router插件
import VueRouter from "vue-router";
// 导入组件
import subject1 from "../pages/subject1.vue";
import subject2 from "../pages/subject2.vue";// 创建路由器对象（在路由器对象中配置路由）
const router = new VueRouter({routes: [// 路由1{name: "sub1",path: "/subject1",component: subject1,},// 路由2{name: "sub2",path: "/subject2",component: subject2,// 带有isAuth属性，并且属性值为ture的，需要鉴权meta: { isAuth: true },},],
});
// 全局前置路由守卫
// 1、书写位置：在创建好router之后，以及暴露router之前
// 2、执行时机：beforeEach()中传入一个回调函数callback，可以是普通函数或箭头函数都可以，
// 在初始化时执行一次，然后每一次在切换任意组件之前都会被调用
// 3、callback函数有3个参数：to from next
// from参数：from是一个路由对象，表示从哪里来（从那个路由切过来的），起点
// to参数：to也是一个路由对象，表示到哪里去，终点
// next参数：是一个函数，调用这个函数之后，表示放行，可以继续向下走
// 4、给路由对象添加自定义属性的话，需要在路由对象的meta（路由元）中定义
router.beforeEach((to, from, next) => {// console.log(to);// 需求：只有当用户是admin时，允许切换到subject2路由上let loginName = "admin1";//1、 判断路由组件的name// if (to.name == "sub2") {//2、 判断路由组件的path// if (to.path == "/subject2") {// 3、可以在路由对象中自定义个属性，需要鉴权的组件都加上ture，不需要鉴权的，则是undefined，是falseif (to.meta.isAuth) {if (loginName == "admin") {next();} else {alert("对不起，你没有权限");}} else {next();}
});// 暴露路由器对象
export default router;

13.2 全局后置守卫

需求： 每次切换完路由组件后，更换title标题栏，在meta中设置title属性属性值

1、书写位置：router/index.js文件中拿到router对象，在创建router对象之后，暴露router对象之前写

2、执行时机：初始化执行一次，以后每一切换完任意路由之后

3、参数：只有to,from,没有next，因为没有必要了

router.afterEach((to, from)=>{ // 翻译为：每次后（寓意：每一次切换路由后执行。）

// 没有 next

document.title = to.meta.title // 通常使用后置守卫完成路由切换时title的切换。

})

该功能也可以使用前置守卫实现：

//需求： 每次切换完路由组件后，更换title标题栏，在meta中设置title属性属性值
// 书写位置：在创建router对象之后，暴露router对象之前
// 执行时机：初始化执行一次，以后每一切换完任意路由之后
// 参数：只有to,from,没有next，因为没有必要了
router.afterEach((to, from) => {document.title = to.meta.title || "欢迎使用";
});

13.3 局部路由守卫之path守卫（路由守卫）

beforeEnter(){}

书写位置：写在route对象中

执行时机：进入到对应路由组件前被调用

参数：to,from,next

注意：没有afterEnter

 // 路由2{name: "sub2",path: "/subject2",component: subject2,// 带有isAuth属性，并且属性值为ture的，需要鉴权// meta: { isAuth: true, title: "subject2" },beforeEnter(to, from, next) {let loginName = "admin1";if (loginName == "admin") {next();} else {alert("对不起，没有权限");}},},

13.4 局部路由守卫之component守卫（组件守卫）

书写位置：写在路由组件当中，也就是xxx.vue文件中

执行时机： beforeRouteEnter 进去路由组件之前执行

beforeRouteLeave 离开路由组件之前执行

注意：只有路由组件才有这两个钩子。

<script>
export default {name: 'subject2',// 进去路由组件之前执行beforeRouteEnter(to, from, next) {console.log(`进入路由组件之前“${to.meta.title}`);next()},// 离开路由组件之前执行beforeRouteLeave(to, from, next) {console.log(`离开路由组件之前“${from.meta.title}`);next()}
}
</script>

14 、前端项目打包

源代码xxx.vue对于浏览器来说，浏览器只认识html，css,js

xxx.vue需要使用项目构建工具完成打包编译

例如，可以使用webpack来打包编译，生成html，css，js,这些浏览器才能识别

14.1、npm run build

1.、路径中#后面的路径称为hash。这个hash不会作为路径的一部分发送给服务器：(1)

http://localhost:8080/vue/bugs/#/a/b/c/d/e （真实请求的路径是：http://localhost:8080/vue/bugs）

2、路由的两种路径模式： hash模式和history模式的区别与选择

(1) hash模式

① 路径中带有#，不美观。

② 兼容性好，低版本浏览器也能用。

③ 项目上线刷新地址不会出现404。

④ 第三方app校验严格，可能会导致地址失效。

(2) history模式

① 路径中没有#，美观。

② 兼容性稍微差一些。

③ 项目上线后，刷新地址的话会出现404问题。需要后端人员配合可以解决该问题。

3.、默认是hash模式，如何开启history模式

(1) router/index.js文件中，在创建路由器对象router时添加一个mode配置项：

4. 项目打包

(1) 将Xxx.vue全部编译打包为HTML CSS JS文件。

(2) npm run build