首先vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容，这就是spa（单页面富应用）
优点: 良好的交互体验,用户不需要刷新页面,页面显示流畅, 良好的前后端工作分离模式,减轻服务器压力,
缺点: 不利于SEO,初次加载耗时比较多
vue-router有两种模式，hash模式和history模式
1.路由的基本参数和属性
<template>
<div id="app">
<div id="nav">
<router-link to="/" tag="span" replace>Home</router-link>|
<router-link to="/about" tag="span" replace>About</router-link>
<button @click="click">测试</button>
<!--to 路由的跳转路径，跟index.js中的路由映射表相匹配 -->
<!-- tag 设置跳转的路由标签类型 -->
<!-- replace 页面切换，禁止使用前进后退的按钮 -->
</div>
<router-view />
</div>
</template>
<script>
export default {
methods:{
click(){
// vue-router3.1之后，push需要添加回调函数，负责控制台会报错
// this.$router.push({path:'/about'}).catch(err => {err})
//repalce跳转浏览器不能返回
this.$router.replace({path:'/about'}).catch(err => {err})
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
/* 点击切换标签改变标题的颜色 */
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
2.路由传参的两种方式
1.传递单独参数
①.路由配置里面传参
index.js中
image.png
②.页面中传递
image.png
③.页面中间接收
image.png
2.query传参
统一资源定位符
以https://wiki.hk.wjbk.site:80/w/index.php?title=Special:随机页面为例, 其中：
- https，是协议；
- wiki.hk.wjbk.site，是服务器；
- 80，80超文本传输协议文件的常用网络端口号，因此一般也不必写明；
- /w/index.php，是路径；
-
?title=Special:随机页面，是询问，相当于query对象，就是传递的参数。
①传参
image.png
②取值
image.png
3.路由懒加载
页面打包后通常放在一个js文件中，但是会造成文件非常大。
请求服务器会耗费很长时间，而且用户会出现短暂的空白。
路由懒加载就是将路由对应的组件打包成一个个js代码块。
只有这个路由被访问的时候，才加载相应的组件。
image.png
4.路由嵌套
①映射表配置
注意，子路由path前面不需要加斜线，表示路径会拼上上级路由的路径
image.png
②页面调用
image.png
③嵌套路由，父级路由要去除name属性，否则vue会发出警告
image.png
image.png
5.路由的全局导航守卫
1）前置守卫
image.png
image.png
2）后置守卫
image.png
6.keep-alive组件
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染
router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：
<keep-alive>
<router-view>
<!-- 所有路径匹配到的试图组件都会被缓存！ -->
</router-view>
</keep-alive>
现在有这样一个需求：首页正正在显示的是被嵌套的消息路由，当我们点击其他页面，又重新点击首页时，让首页仍然显示被嵌套的消息路由
图片.png
- 先取消嵌套路由的默认路径
图片.png
- 在 App.vue 中使用
<keep-alive></keep-alive>包裹<router-view/>
图片.png
- 在 Home.vue 中记录离开之前的路径
图片.png
keep-alive 还有两个非常重要的属性:
• include - 字符串或正则表达，只有匹配的组件会被缓存
• exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
让部分组件不缓存：
<keep-alive exclude="Profile,User"><router-view/></keep-alive>
