- 前后端路由的来历
- 前端如何实现页面跳转但是不刷新? 了解hash和history两种方法
- vue-router基本使用
- 安装vue-router
- 搭建vue-router框架的步骤
- vue-router路由的配置步骤
- 第一步： 创建路由组件
- 第二步： 配置路由映射。 即：组件和路由的关系
- 第三步： 使用路由， 通过<router-link>和<router-view>来展示组件
- 路由的默认配置
- 修改静态路由的模式为history
- vue-link属性设置
- 通过代码跳转路由
- 动态路由的使用
- 路由的懒加载
- vue-router的嵌套
- vue-router参数传递
- vue-router导航守卫
- keep-alive
说道路由， 我们最熟悉的路由是什么呢？ 那就是路由器了。 其实路由器有两个重要的功能： 路由和传送
下面我们先来搭建一个项目, 然后一边学习一遍在项目里实战 创建vue-cli2项目
代码语言：javascript复制vue init webpacek vueroute然后一路向下就可以了, 如果本地创建项目很慢, 可以采用离线创建项目的方式, 具体步骤:
- 下载webpack离线模板: https://github.com/vuejs-templates/webpack
- 将下载的模板压缩包解压，修改文件名为wepback并放入到/Users/自己电脑的用户名/.vue-templates文件夹中.
- 执行创建项目的命令: vue init webpack --offline
一. 前后端路由的来历
前后端路由, 目前经历了三个阶段, 哪三个阶段呢?
- 前后端一体(后端路由)阶段: 这个阶段类似早起的jsp页面, 和java页面混合在一起, jsp里面有css, js, 还有java代码, 前后端都是混合在一起的. 缺点很明显, 前后端分工不明确. 这种方式采用的是后端路由 基本流程: 请求一个controller接口 --> 通过接口找到页面 --> 渲染页面 --> 返回给浏览器
- 前后端分离阶段: 前端通过ajax调用的形式, 调用后台接口. 前端主要负责页面渲染, 后端主要提供api接口. 优点: 前后端分离. 各司其职, 分明明确. API可复用性强, fe, android, ios都可用 此时用户请求的就是一个html页面, 页面需要哪个url了, 直接通过ajax请求到页面. 基本流程: 浏览器url请求 -> html页面 -> ajax请求api接口 -> 后台接口响应数据 -> html页面渲染 -> 返回给浏览器
- 单页面富应用阶段: 简称SPA, 全称是simple page application. 最主要的特点是在前后端分离的基础上加了一层前端路由. 这个路由是有前端来维护的一套路由. 单页面指的是:一个html文件 一个js文件 一个css文件.
可是就一个网站来说, 不可能只有一个页面. 那么是如何实现的呢?我们来看下图
前端只有一个页面index.html, 而各个功能都是一个组件, 将所有组件都放到index.html页面中, 然后根据用户的请求定位到某一个组件. 这个是谁来定位的呢?就是前端路由来定位, 在vue中前端路由就是vue-router.
前端路由的核心是什么呢? 改变url, 但是页面不进行整体刷新.
二. 前端如何实现页面跳转但是不刷新?
前面说了, vue使用的是单页面富应用, 也就是一个index.html就是整个项目, 然后在内部在跳转链接的时候, 不会刷新页面, 实现这种方式有两种方法:hash和history 这两种模式都可以实现页面跳转,但是不刷新页面. 他们如何使用, 又有什么区别呢?
1. hash
首先启动vue项目
vue init dev
然后打开页面
localhost:8080
在浏览器控制台输入localhost.hash="about", 我们可以看到页面链接变成了localhost:8080/#/about/
如上图, 我们可以通过location.hash="链接"的方式来修改url,但是并不刷新页面
2. history
除了使用hash,我们还可以使用history来改变实现改变url但不刷新页面的方法. history有几个常见的用法.
- history.pushState(state,"title","url") 向浏览器新增一条历史记录，但是不会刷新当前页面（不会重载）
- state为对象，可以用作携带信息用，
- title：目前来看没啥用一般为空或null，
- URL：即要更改页面的URL，且必须同源，不能跨域；
案例: 我们在vue的浏览器界面改变http://localhost:8080为http://localhost:8080/about
如上图所示: 当我们执行history.pushState({a:1},null,"about");的时候, 浏览器并没有刷新页面(Network没有请求), 但是url链接确实发生了变化
- history.replaceState(state,title,URL)
更改当前浏览器的历史记录，即把当前执行此代码页面的记录给替换掉，参数与第一条相同
- history.back()、history.forward()、history.go() 分别为前进一个历史，后退一个，history.go(Number)，其中Number可正可负，即向前或向后若干个记录
案例:
如上图, 当我们使用history.back()命令的时候, 会回退到上一个页面, 也并没有发生更新.
- history.state 返回当前页面状态参数，此参数一般由history.pushState(state,title,URL);以及history.replaceState(state,title,URL);附带的state值，例子如下：
案例:
如上图: 可以看出history.state就是取出了pushState和replaceState两个命令中的第一个参数
- history.length 返回当前页面所产生的历史记录个数，即在同一个浏览器tab下产生的历史记录；
- history事件onpopstate
window.onpopstate = function(e){
console.log(e.state);
}在history.back(),history.forward(),history.go()时触发此事件，但是在history.pushState();history.replaceState();时并不会触发此事件，事件内可以获取到state状态值
可以看出vue-router中push()、go()等函数是基于hash和histroy的，但是vue-router比这个要复杂.
三. vue-router基本使用
vue-router是Vue.js官方的路有插件, 他和vue.js是深度集成的.适合构建于单页面富应用.
vue-router官网: https://router.vuejs.org/zh/
- vue-router是基于路由和组件的: 路由用于设定访问路径, 将路径和组件映射起来
- 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.
1. 安装vue-router
代码语言：javascript复制npm install vue-router --save--save: 表示在构建以后也要使用这个路由 安装好以后, 在package.json中就可以看到安装的vue-router的版本了
并且在src目录下多了一个文件夹router
2. 搭建vue-router框架的步骤
在我们安装了vue-router以后,就会在src目录下自动生成一个文件夹router. 我们在里面创建一个index.js文件, 然后开始配置路由相关的信息
- 第一步: 导入路由对象,并且调用vue.use(VueRouter) 安装了vue-router, 要想使用, 还需要先引入路由对象
import Router from 'vue-router'vue-router是一个插件, 所以, 我们需要使用vue.use(插件名) 来安装插件
代码语言：javascript复制Vue.use(Router)- 第二步: 创建路由实例,并且传入路由映射配置 在VueRouter中主要是配置路由和组件之间的映射关系的.
const routes = [
]
const router = new VueRouter({
// 这里配置的是路由和组件的映射关系, 是一个数组.
routes
})在这里路由是空的, 还没有配置任何映射关系.
- 第三步: 将vue-router实例对象导出
export default router- 第四步: 在vue实例中挂载创建的路由实例
import router from './router'在import目录的时候, 有一个默认的规则, 那就是如果你导入一个目录, 比如./router, 没指定导入哪一个文件, 他会自动导入index.js文件*
然后在vue实例中引入router
代码语言：javascript复制new Vue({
el: '#app',
// 然后通过router导入vue路由
router,
render: h => h(App)
})3. vue-router路由的配置步骤
- 第一步： 创建路由组件 通常， 我们会在components目录下创建组件。鼠标右击-> Vue Component， 然后定义组件内容 我们创建两个组件， 一个首页， 一个关于页面.
首页
代码语言：javascript复制<template>
<div>
<h2>这是Home主页</h2>
<div>欢迎来到home主页</div>
</div>
</template>
<script>
export default {
name: "Home"
}
</script>
<style scoped>
</style>关于页面
代码语言：javascript复制<template>
<div>
<h2>关于页面</h2>
<div>欢迎来到关于页面</div>
</div>
</template>
<script>
export default {
name: "About"
}
</script>
<style scoped>
</style>这样组件就创建好了。
- 第二步： 配置路由映射。 即：组件和路由的关系
组件创建好了， 接下来要构建组件和路由的关系。 构建路由关系，我们通常定义在router/index.js文件
映射关系主要有两个部分. 一个是path:路由的路径; 一个是component:关联的组件
在router/index.js文件中首先引入上面定义好的组件
代码语言：javascript复制import Home from '../components/Home';
import About from "../components/About";然后指定路由路径和组件
代码语言：javascript复制const routes = [
{
path: "/home",
component: Home
},{
path: "/about",
component: About
}
]- 第三步： 使用路由， 通过<router-link>和<router-view>来展示组件 现在组件有了， 路有关系也有了。 那么接下来就是要有个入口来展示组件或者路由了。 我们的入口只有一个， 那就是App.vue， 所以， 我们直接在这里定义两个入口即可。
<template>
<div id="app">
<!-- 定义两个路由链接 -->
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<!-- 展示组件内容 -->
<router-view></router-view>
</div>
</template><router-link>: 是一个vue-router中内置的组件， 它会被渲染成一个a标签。 <router-vie>: 会根据当前的路径， 动态渲染组件的内容 网页的其他内容， 例如：顶部的标题/导航，底部的版权信息等和/处于一个等级 在切换路由时， 切换的是挂在组建的内容， 其他不会发生改变
整体效果如下：
4. 路由的默认配置
现在我们进入首页显示的只有导航信息， 在页面必须点击某一个按钮，才能渲染出对应组件的内容。通常我们会有一个默认组件的展示。 否则首页内容就是空的了。如何设置默认展示的路由呢？
在路由表中增加一个重定向路由
代码语言：javascript复制{
path:"/",
redirect: "/home"
}这样， 打开首页，直接加载home组件的内容
5. 修改静态路由的模式为history
我们之前都是采用hash的方式来静态路由跳转的， 但hash方式有一个缺点， 即带有# 例如：我们跳转都Home页， 他的路径是
代码语言：javascript复制http://localhost:8080/#/home带有一个#， 这不符合我们通常路径的使用方法，所以，我们可以考虑将其替换为history的模式。 如何替换呢？ 在router/index.js文件中
代码语言：javascript复制const router = new Router({
// 这里配置的是路由和组件的映射关系, 是一个数组.
routes,
mode: "history"
})6. vue-link属性设置
1. to属性
我们在首页, 定义vue-link跳转的路由使用的就是to属性
代码语言：javascript复制<template>
<div id="app">
<!-- 定义两个路由链接 -->
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<!-- 展示组件内容 -->
<router-view></router-view>
</div>
</template>2. tag属性
<router-link> 默认会被渲染成a标签, 如果我们想要将其渲染为其他标签是否可以呢? 当然是可以的, 使用tag属性, 比如: 我们想要将其渲染为button标签
代码语言：javascript复制<template>
<div id="app">
<!-- 定义两个路由链接 -->
<router-link to="/home" tag="button">首页</router-link>
<router-link to="/about" tag="button">关于</router-link>
<!-- 展示组件内容 -->
<router-view></router-view>
</div>
</template>
3. replace属性
如下图, 我们在点击导航以后, 可以在浏览器向前或向后导航
如果我们不想要浏览器记录我们的请求行为, 可以使用replace. 我们只需要在<router-link>标签中增加属性replace就可以了. 这个属性不需要设置值
代码语言：javascript复制<template>
<div id="app">
<!-- 定义两个路由链接 -->
<router-link to="/home" tag="button" replace>首页</router-link>
<router-link to="/about" tag="button" replace>关于</router-link>
<!-- 展示组件内容 -->
<router-view></router-view>
</div>
</template>效果如下: 浏览器的返回和前进按钮都不可用
4. active-class 修改激活时样式名称的默认值 先来看看如何设置<router-link>元素的样式. 在点击按钮的时候, 在控制台可以看到有一个样式router-link-active, 这个样式是控制按钮激活的样式, 如果我们想要修改激活的效果, 修改这个样式即可.
比如: 我们设置按钮激活时字体颜色为红色.
代码语言：javascript复制<template>
<div id="app">
<!-- 定义两个路由链接 -->
<router-link to="/home" tag="button" replace>首页</router-link>
<router-link to="/about" tag="button" replace>关于</router-link>
<!-- 展示组件内容 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
.router-link-active {
color:red;
}
</style>重点看style里面的样式定义. 效果如下:
router-link-active是vue-router默认/激活时显示的样式, 如果想要修改这个样式名称, 可以使用active-class.
代码语言：javascript复制<template>
<div id="app">
<!-- 定义两个路由链接 -->
<router-link to="/home" tag="button" replace active-class="active">首页</router-link>
<router-link to="/about" tag="button" replace active-class="active">关于</router-link>
<!-- 展示组件内容 -->
<router-view></router-view>
</div>
</template>如上, 可以看到active-class="active", 表示将默认的属性重命名为active.
后面重定义样式的时候, 使用active即可
代码语言：javascript复制<style>
.active {
color:red;
}
</style>全局修改active-clas的默认名称. 可以在路由里实现.
修改router/index.js文件
代码语言：javascript复制const router = new Router({
// 这里配置的是路由和组件的映射关系, 是一个数组.
routes,
mode: "history",
linkActiveClass: "active"
})7. 通过代码跳转路由
上面我们都是在vue中直接使用<router-link>来路由, 我们还可以使用普通标签路由, 例如button标签, 来看看怎么实现 第一步: 定义两个button元素
代码语言：javascript复制<template>
<div id="app">
<!-- 定义两个路由链接 -->
<button @click="clickHome">首页</button>
<button @click="clickAbout">关于</button>
<!-- 展示组件内容 -->
<router-view></router-view>
</div>
</template>这就是两个普通的button, 然后定义了两个click点击事件, 下面我们就要在点击事件中实现路由
第二步: 定义click事件, 路由到组件
代码语言：javascript复制<script>
export default {
name: 'App',
methods:{
clickHome() {
this.$router.push("/home")
console.log("点击home按钮")
},
clickAbout() {
this.$router.push("/about")
console.log("点击about按钮")
}
}
}
</script>这里定义了点击事件. 通过this.$router.push("/home")来路由到home组件.
this.router.push("/home"): 在每一个vue对象中, 通过this都可找到
this.$router.push("/home")是使用history的的方式路由到对应的组件, 可以通过浏览器的前进和后退按钮路由.
this.$router.replace("/home"): 不可以使用浏览器的前进和后退按钮路由.
8. 动态路由的使用
动态路由是什么概念呢? 通常我们的url是不变的, 比如. /home, 有些url是变化的,比如/user/zhangsan, /user/lisi, 对于变化的url, 我们如何路由呢? 下面就以用户为例, 来实现动态路由 第一步: 创建一个User.vue模板
代码语言：javascript复制<template>
<div>
<h2>用户界面</h2>
<div>欢迎你来到用户界面</div>
</div>
</template>
<script>
export default {
name: "User"
}
</script>
<style scoped>
</style>第二步: 添加路由映射关系
代码语言：javascript复制import User from "../components/User"
const routes = [
{
path: "/user/:userId",
component: User
}
]这里path使用了:userId占位, 表示这里是一个占位符, 将被真实的userId替换. 后面在路由传递的时候变量需要和这里保持一致.
第三步: 使用user路由
当我们动态路由到user的时候, 需要使用变量userId, 我们可以在data中定义一个变量
代码语言：javascript复制<template>
<div id="app">
<!-- 定义两个路由链接 -->
<router-link to="/home" tag="button" replace active-class="active">首页</router-link>
<router-link to="/about" tag="button" replace active-class="active">关于</router-link>
<router-link v-bind:to="'/user/' userId" tag="button" replace active-class="active">用户</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
userId:"zhangsan"
}
}
}
</script>在上面使用了v-bind:to="'/user/' userId"路由到/user/:userId, 而userId是我们在组件中定义的一个变量.
第三步:来看看效果
我们看到当点击用户的时候, 浏览器的url路径变为了/user/zhangsan.
第四步: 将参数传递到组件
我们希望在user组件中显示, 欢迎{{用户名}}来到用户页面, 如何实现呢?
要想实现这个效果, 需要使用到this.$route对象. 这是获取路由信息的对象.
代码语言：javascript复制<template>
<div>
<h2>用户界面</h2>
<div>欢迎{{userId}},来到用户界面</div>
</div>
</template>
<script>
export default {
name: "User",
data(){
return {
userId:this.$route.params.userId
}
}
}
</script>
<style scoped>
</style>可以看到在data属性中,我们通过this.$route.params.userId 获取到了路由连接中的userId参数. 然后在页面通过语法糖的方式展示出用户{{userId}}即可. 来看看效果:
如上图所示, 我们看到userId变量被传递到了组件里面.
这里重点想要说的就是通过this.$route.params获取变量.
我们也可以在页面直接使用{{$route.params.userId}}获取路由参数
代码语言：javascript复制<template>
<div>
<h2>用户界面</h2>
<div>欢迎{{userId}},来到用户界面</div>
<div>{{$route.params.userId}}</div>
</div>
</template>9. 认识路由的懒加载
首先为什么需要懒加载, 原因是, 当我们打包的时候, 会将所有的js文件,css进行打包, 打包到一个文件中, 然后在index.html页面中引入这些js,css文件.我们来看一下效果 首先, 我们先将项目打包, 然后看看打包后的文件结构
代码语言：javascript复制npm run build打包完成以后, 会生成一个dist的文件夹,里面就是打包后的文件
如上图文件结构如下:
有一个index.html文件和static文件夹
- index.html: 项目的主页面入口
- static文件夹: 存放的是css和js等静态资源
- css文件夹: 里面只有一个app.*.css文件, 这个文件是将所有的css整合到这里了
- js文件夹: 该文件夹中有三个文件
- app.*.js: 这个文件整合的是我们自己写的业务逻辑相关的js代码
- manifest.*.js: 这个文件整合的是支撑我们的业务逻辑的底层支撑js代码
- vendor.*.js: 这个文件整合了使用到的所有外部组件的js代码
一个项目可能有很多组件, 有自定义的组件, 有引入的外部组件, 那就会有很多js, css代码, 最终全部通过index.html加载进来, 这样在首次加载的时候速度就会很慢. 所以, 我们需要使用懒加载, 来提高首次加载速度.
什么是懒加载呢?
使用时才加载, 就是懒加载, 而不是一次性全部加载进来
怎样才能做到懒加载呢?
把不同的路由对应的组件分隔成不同的代码块, 而不是统一全部加载到app.*.js文件中,当路由被访问的时候才加载对应的js文件, 这样会更加高效
如何实现懒加载呢?
在路由定义的时候, 是有懒加载的方式
原来定义路由是这样的
代码语言：javascript复制import Home from '../components/Home';
import About from "../components/About";
import User from "../components/User"
/*
* 第一步: 安装插件
* vue-router是一个插件, 所以, 我们需要使用vue.use(插件名) 来安装插件
*/
Vue.use(Router)
/*
* 第二步: 构建VueRouter对象
* 在VueRouter中主要是配置路由和组件之间的映射关系的.
*/
const routes = [
{
path:"/",
redirect: "/home"
}, {
path: "/home",
component: Home
},{
path: "/about",
component: About
},{
path: "/user/:userId",
component: User
}
]懒加载需要使用一个匿名函数来import, 表示使用的时候在import引入. 一个懒加载在打包的时候会单独打包成一个js文件.
代码语言：javascript复制// 这里会引入你要导入的组件, 然后通过路由配置组件内容
const Home = () =>import('../components/Home');
const About = () => import('../components/About');
const User = () => import('../components/User');
/*
* 第一步: 安装插件
* vue-router是一个插件, 所以, 我们需要使用vue.use(插件名) 来安装插件
*/
Vue.use(Router)
/*
* 第二步: 构建VueRouter对象
* 在VueRouter中主要是配置路由和组件之间的映射关系的.
*/
const routes = [
{
path:"/",
redirect: "/home"
}, {
path: "/home",
component: Home
},{
path: "/about",
component: About
},{
path: "/user/:userId",
component: User
}
]我们将代码的引入方式改变了,这样在打包的时候, 会将每一个import进来的文件打包成一个单独的js文件. 如下图所示:
和之前相比, 多了3个文件, 因为使用了三个懒加载组件.
二. vue-router的嵌套
嵌套路由是一个很常见的功能, 比如主业引入了组件Home, 我们在Home里面引入了banner图组件. 这样就是组件的嵌套.
我们的路由映射规则是: 一个路径映射一个组件. 访问两个路径, 会分别渲染两个组件.
下面来实现嵌套路由,
第一步: 创建组件,创建两个组件
HomeBanner.vue组件
代码语言：javascript复制<template>
<div>
<h2>首页banner图</h2>
<ul>
<li>banner图1</li>
<li>banner图2</li>
<li>banner图3</li>
<li>banner图4</li>
</ul>
</div>
</template>
<script>
export default {
name: "HomeBanner"
}
</script>
<style scoped>
</style>HomeNews.vue组件
代码语言：javascript复制<template>
<div>
<h2>首页新闻</h2>
<ul>
<li>第一条新闻</li>
<li>第二条新闻</li>
<li>第三条新闻</li>
<li>第四条新闻</li>
</ul>
</div>
</template>
<script>
export default {
name: "HomeNews"
}
</script>
<style scoped>
</style>第二步: 创建组件路由
我们要在Home也添加子路由, 需要在路由里面增加一个children属性配置.
代码语言：javascript复制//引入子路由-使用懒加载的方式进行加载
const HomeBanner = ()=>import('../components/HomeBanner');
const HomeNews = () => import('../components/HomeNews');
{
path: "/home",
component: Home,
children: [{
path:'',
redirect: 'HomeNew'
},{
path: 'HomeNew', //注意: 这里面没有/
component: HomeNews
},{
path: 'HomeBanner',
component: HomeBanner
}]
}里面的路径依然是有两个部分:
- 一个是path路由路径: 这里需要注意的是,不需要在路径名的前面加/
- 另一个是component: 指定组件名称
第三步: 增加<router-link> 和 <router-view/>
我们要在Home页面展示子组件, 因此需要将子组件的展示放在页面上
代码语言：javascript复制<template>
<div>
<h2>这是Home主页</h2>
<div>欢迎来到home主页</div>
<router-link to="/home/homeNew">新闻</router-link>
<router-link to="/home/homeBanner">Banner图</router-link>
<router-view></router-view>
</div>
</template>完成以后,效果如下:
三. vue-router参数传递
vue-router参数传递有两种方式: 第一种是: param的方式. 第二种是: query的方式
1. param方式
这种方式在动态路由的时候有提到过. 下面来回顾一下:
第一步: 创建一个User.vue组件
代码语言：javascript复制<template>
<div>
<h2>用户界面</h2>
</div>
</template>
<script>
export default {
name: "User",
}
</script>
<style scoped>
</style>第二步:创建动态路由的时候, 定义变量
代码语言：javascript复制const routes = [
{
path: "/user/:userId",
component: User
}
]我们定义了一个user/:userId, 这样的动态路由. 路由可以是/user/zhangsan, 或者/user/lisi
第三步: 在App.vue中定义动态路由跳转的组件
代码语言：javascript复制<template>
<div id="app">
<!-- 定义两个路由链接 -->
<router-link to="/home" tag="button" replace active-class="active">首页</router-link>
<router-link to="/about" tag="button" replace active-class="active">关于</router-link>
<!-- 定义动态路由 -->
<router-link v-bind:to="'/user/' userId" tag="button" replace active-class="active">用户</router-link>
<!-- 展示组件内容 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
userId:"zhangsan"
}
}
}
</script>
<style>
.active {
color:red;
}
</style>这里面userId是变化的部分. 通过bind事件动态将userId绑定到path路径中
代码语言：javascript复制<router-link v-bind:to="'/user/' userId" tag="button" replace active-class="active">用户</router-link>第四步: 修改User.vue组件
首先, 在User.vue脚本中获取传递过来的路由参数. 我们使用[this.$route.params.变量名]的方式获取路径参数
代码语言：javascript复制<script>
export default {
name: "User",
data() {
return {
userId: this.$route.params.userId
}
}
}
</script>然后使用语法糖, 将变量显示出来
代码语言：javascript复制<template>
<div>
<h2>用户界面</h2>
<div>欢迎{{userId}},来到用户界面</div>
<div>{{$route.params.userId}}</div>
</div>
</template>也可以直接使用使用{{$route.params.userId}}的写法
以上是使用参数的方式传递变量.
2. query方式
第一步: 配置路由的时候是普通配置: /user 第二步:传递的方式使用query的方式, query是一个对象, 第三步:传递后形成的路径是:/user?useId=2, /user?userId=9
下面来举个案例:
第一步: 创建一个组件Profile.vue
代码语言：javascript复制<template>
<div>
<h2>这是一个Profile组件</h2>
</div>
</template>
<script>
export default {
name: "Profile"
}
</script>
<style scoped>
</style>第二步: 配置路由
代码语言：javascript复制// 配置路由相关的信息
// 导入vue和vue-router
import Vue from 'vue'
import Router from "vue-router";
// 这里会引入你要导入的组件, 然后通过路由配置组件内容
// 懒加载
const Profile = () => import('../components/Profile')
/*
* 第一步: 安装插件
* vue-router是一个插件, 所以, 我们需要使用vue.use(插件名) 来安装插件
*/
Vue.use(Router)
/*
* 第二步: 构建VueRouter对象
* 在VueRouter中主要是配置路由和组件之间的映射关系的.
*/
const routes = [
{
path: "/profile",
component: Profile
}
]
const router = new Router({
// 这里配置的是路由和组件的映射关系, 是一个数组.
routes,
mode: "history",
linkActiveClass: "active"
})
/*
* 第三步: 将VueRouter对象导出
*
*/
export default router第三步: 渲染组件
代码语言：javascript复制 <!-- 配置动态路由 -->
<router-link v-bind:to="{path:'/profile', query:{name:'lily',sex:'男',age:12}}" tag="button" replace active-class="active">档案</router-link>通常我们定义路由是这样定义的
代码语言：javascript复制 <!-- 配置动态路由 -->
<router-link to="/profile" tag="button" replace active-class="active">档案</router-link>但是, 这样路由就固定写死了, 所以肯定不行, 我们需要给他一个变量, 使用v-bind:to 然后就有了下面这个写法
代码语言：javascript复制v-bind:to="{path:'/profile', query:{name:'lily',sex:'男',age:12}}"第四步: 来看一下效果
我们看到路径上带了?参数.
代码语言：javascript复制http://localhost:8080/profile?name=lily&sex=男&age=12第五步: 在Profile组件中获取参数
获取参数有两种方式
- 直接语法糖方式获取{{$route.query.***}}
- 在脚本中获取:this.$route.query.***
如下采用方式一获取参数:
代码语言：javascript复制<template>
<div>
<h2>这是一个Profile组件</h2>
<h4>{{$route.query}}</h4>
<h4>{{$route.query.name}}</h4>
<h4>{{$route.query.age}}</h4>
<h4>{{$route.query.sex}}</h4>
</div>
</template>第六步: 查看效果
四. vue-router导航守卫
导航守卫, 听者特别的高大上. 到底是什么意思呢? 在之前的html页面, 如果我们想要实现title跟着页面变, 那么只需要设置html页面的title属性就可以了. 在vue中, 只有一个index.html页面,如何实现title的改变呢? 有两种方法:
- 第一种, 使用生命周期函数created().
- 第二种: 使用全局导航守卫
1. 使用生命周期实现页面更新title属性
组件的生命周期, 这在之前有提到过. 子组件的生命周期中有很多函数, 比如created(), mouted(), updated(), 我们可以在他的生命周期增加处理逻辑. ,我们可以在created()方法中增加处理逻辑.
代码语言：javascript复制<template>
<div>
<h2>这是Home主页</h2>
<div>欢迎来到home主页</div>
<router-link to="/home/homeNew">新闻</router-link>
<router-link to="/home/homeBanner">Banner图</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "Home",
created() {
document.title="首页"
}
}
</script>
<style scoped>
</style>我们看到在script中增加一个created方法. 并指定了title名称.
代码语言：javascript复制<script>
export default {
name: "Home",
created() {
document.title="首页"
}
}
</script>来看一下效果
这样有什么问题? 假如现在有100个页面, 我们需要在100个页面中都增加created()函数. 虽然可以实现功能,但似乎有些麻烦, 有没有可以统一修改的办法呢?我们可以使用全局导航守卫实现
3.2. 使用全局导航守卫的方式更新title属性
什么是导航守卫?
来看看官网的解释: https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
- 这里的导航,指的就是路由的跳转或者取消跳转
- 守卫指的是: 有很多钩子方法, 允许我们在某一个过程中植入代码逻辑.
- 常见的导航守卫有: 全局导航守卫(包括三个: 全局前置守卫, 全局解析守卫, 全局后置守卫), 路由独享导航守卫, 组件内的守卫.
下面老看看[全局前置守卫]
1. 使用 router.beforeEach 注册一个全局前置守卫
代码语言：javascript复制const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})当一个导航触发时，全局前置守卫按照创建顺序调用。 守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。
我们来看看router.beforeEach的实现.
点击beforeEach进入到router.ts文件, 可以看到里面定义了router.beforeEach()方法的定义
代码语言：javascript复制beforeEach(guard: NavigationGuard): Function这是一个函数, 方法有一个入参, 参数是一个方法, 参数名是guard. 方法体是NavigationGuard. 我们来看看NavigationGuard的实现逻辑
代码语言：javascript复制export type NavigationGuard<V extends Vue = Vue> = (
to: Route,
from: Route,
next: NavigationGuardNext<V>
) => anyNavigationGuard也是一个函数, 并且这个函数继承自Vue. 函数有三个入参: to, from, next. 方法实现是any.
所以,我们要想重写beforeEach()方法. 那么参数就要定一个方法, 并且方法里有三个入参. 方法如下:
代码语言：javascript复制router.beforeEach(function(to, from, next) {
})除了这种方法, 我们还可以使用箭头函数
代码语言：javascript复制router.beforeEach((to, from, next) =>{
})两种都是可以的.
接下来, 看看函数中三个参数都是什么含义呢?
- to: 是一个router对象, 含义是导航到的目标路径.
- from: 是一个router对象, 含义是当前导航正要离开的路由.
- next: 是一个函数, 这是一个钩子函数. 一定要调用该方法来 resolve 这个钩子
函数实现的部分, 一定要调用next()方法. 表示导航继续向下执行. 如果不调用next(), 那么后面的函数将不会被解析或者执行. 也就是说, 代码这至少是这样的
代码语言：javascript复制router.beforeEach((to, from, next) =>{
next();
})确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错。
2. 在路由index.js文件中增加元数据属性, 并设置title属性值
代码语言：javascript复制const routes = [
{
path:"/",
redirect: "/home",
}, {
path: "/home",
component: Home,
children: [{
path:'',
redirect: 'HomeNew'
},{
path: 'homeNew', //注意: 这里面没有/
component: HomeNews
},{
path: 'homeBanner',
component: HomeBanner
}],
meta: {
title: "首页"
}
},{
path: "/about",
component: About,
meta: {
title: "关于"
}
},{
path: "/user/:userId",
component: User,
meta: {
title: "用户"
}
},{
path: "/profile",
component: Profile,
meta: {
title: "档案"
}
}
]增加的元数据内容如下
代码语言：javascript复制 meta: {
title: "档案"
}3. 后面在全局导航路由中设置title属性
代码语言：javascript复制router.beforeEach((to, from, next) => {
console.log(to)
console.log(from)
document.title = to.matched[0].meta.title
next()
})我们通过打印to和from对象, 发现他们确实都是路由对象, 我们可以通过matched中的第0个元素,获取到meta中的内容.
我们看到其实to下面和matched平级的也有一个meta属性, 但是这个属性在某些情况下值是空的. 所以, 我们还通过matched的第一个元素来获取meta对象
以上就是全局前置导航守卫的用户, 后置导航守卫等其他守卫, 用法与其相似, 可以查看官方文档: https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
前置守卫也好, 后置守卫也好, 都是路由组件的钩子函数, 通过钩子函数, 我们可以在对应的生命周期织入业务逻辑.
理解守卫的含义 全局前置守卫, 全局解析守卫, 全局后置守卫: 定义在路由文件中, 表示对所有路由都有效 路由独享守卫: 可以在路由配置上直接定义 beforeEnter 守卫： 组件内的守卫:你可以在路由组件内直接定义以下路由导航守卫, 有效范围是某个组件. 常见的组件内守卫: beforeRouteEnter(进入路由前),beforeRouteUpdate (更新路由前)),beforeRouteLeave(离开路有前)
五. keep-alive
我们有首页, 关于, 用户, 档案. 首页下面有两个按钮[新闻],[消息] 当点击首页的[消息], 然后切换到关于页面, 再回到首页的时候, 我们希望能够继续展示[消息]的内容 默认是不会保留操作的记忆的. 下次回来直接到[首页->新闻], 使用keep-alive就可以有保留记忆的效果了
为什么每次回到首页, 都会展示[首页->新闻]的内容呢? 原因是每次回到首页都会创建一个新的Home组件. 我们来验证每次回到首页都会重新创建一个新的组件. 来看看vue组件的生命周期. 其实Vue对象本身也是一个大组件
如上图所示:在vue整个生命周期, 他有很多挂载函数, 比如:beforeCreate(创建组件之前), created(创建组件后), beforeMount(挂载组件之前), mounted(挂载组件之后), beforeUpdate(组件值更新之前),updatd(组件值更新之后),beforeDestroy(组件销毁之前),destroyed(组件销毁之后)
1. 验证, 是否销毁了原来的组件呢?
我们只需要验证created()和destroyed()两个函数是否每次跳走都会被执行一遍.
代码语言：javascript复制<script>
export default {
name: "Home",
created() {
document.title="首页"
console.log("created home")
},
destroyed() {
console.log("destroyed home")
}
}
</script>如上所示:定义了创建函数和销毁函数, 下面来看看当跳走的时候, 是不是会执行这两个函数.
如上图所示: 当离开首页,就会执行destroyed函数, 当进入首页, 就会执行created函数. 说明每次确实都在创建新的组件
2. 如何才能让组件有记忆,而不是每次都重新创建呢?
如果想要实现路由跳转走以后, 返回来不需要重新创建组件, 我们可以使用keep-alive, 他的用法很简单 在组建展示的位置增加标签
代码语言：javascript复制 <keep-alive>
<router-view></router-view>
</keep-alive>这样调走再跳回来就不会重新创建组建了, 来看看效果
我们看到只有第一次创建了home组件, 后来路由调走, 组件并没有被销毁.
3.案例: 实现从[首页->banner图]跳走后, 在跳回来, 依然定位在[首页->banner图]的位置
跳走, 在跳回来, 这实际上是在控制路由.我们可以让路由调走之前记住当前组件的路由. 要想实现这个功能,需要了解一下几个钩子函数:
- activated: 路由激活时触发
- deactivated: 路由取消激活时触发
先来看这两个: 这两个函数生效的条件是 : 设置了<keep-alive>组件才有效. 也就是说, 组件离开时不销毁. 我们在home组件中增加两个方法
代码语言：javascript复制 activated() {
// 路由激活
console.log("activated home")
},
deactivated() {
// 路由取消激活
console.log("deactivated home")
},然后来看看效果: 我们发现跳到home路由, 触发activated方法, 离开home路由, 触发deactivated方法. 如何记住路由呢? 我们可以定义一个变量来记住调走前的路由.
this.$route.path : 他是获取当前激活的路由
要想实现这个功能, 还需要使用到路由守卫. 路由守卫有三种类型
代码语言：javascript复制const Foo = {
template: `...`,
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}我们选择使用最后一个beforeRouteLeave, 在离开当前路由的时候, 记录下离开前的路由. 代码实现如下:
1. 在home组件增加两个方法, 一个是activated组件激活的时候重定向路由, 另一个是beforeRouteLeave组件离开前记录离开前的路由
代码语言：javascript复制activated() {
// 路由激活, 路由到path路径
this.$router.push(this.path)
},
beforeRouteLeave(to, from, next) {
console.log("离开home前的路径 " this.path)
this.path = this.$route.path;
next()
}2. 看一下运行的效果:
以上就是keep-alive的内容, 这里重要要有一个概念, 组件调走以后是会销毁原来的组件的.如果我们不想它被销毁, 那么可以使用<keep-alive>组件实现.
4. keep-alive 的属性
keep-alive有两个属性: 一个是include, 另一个是exclude
- include: 字符串或者正则表达式, 只有匹配的组件才会被缓存
- exclude: 字符串或者正则表达式, 匹配到的组件不会被缓存.
比如,我们整个组件都希望每次加载会缓存, 但是档案组件特殊, 希望他每次都被销毁, 重新创建.
第一步: 在Profile组件中增加created和destroy事件
代码语言：javascript复制created() {
console.log("Profile created")
},
destroyed() {
console.log("Profile destroyed")
}第二步: 在<keep-alive>中配置排除Profile组件
代码语言：javascript复制<keep-alive exclude="Profile">
<router-view></router-view>
</keep-alive>这样, Profile组件就不会被缓存了
第三步: 演示效果
