Vue学习笔记之15-vue-router详解

什么是路由

路由是一个网络工程中的一个术语
- 路由(routing) 就是通过互联的网络把信息从源地址传输到目的地址的活动
路由器提供了两种机制: 路由和传送
- 路由是绝对数据包从来源到目的地的路径
- 传送将输入端的数据转移到合适的输出段
路由中有一个非常重要的概念叫路由表
- 路由表本质就是一个映射表, 决定了数据包的指向
相关概念
- 内网IP, 每一个链接上网络的设备都有一个内网IP, 这个内网IP是为了区分链接同一个局域网的不同设备, 在同一个局域网中的每个设备的内网IP是唯一的
- 公网IP, 公网IP是一个局域网对外链接是用于区分不同局域网的, 每一个局域网的公网IP都是唯一的
- 路由中有一个映射表, 将局域网中的内网IP和设备的mac地址对应起来
举个例子
- 现在有一条信息从北京发到广东
- 这条信息途中会进过很多路由, 并根据公网IP找到对应的局域网
- 再通过路由中的映射表, 找到要传送的设备mac地址对应的内网IP, 再传送给正确的设备

认识web开发的三个阶段

后端路由阶段

在早期的网站开发中, 整个HTML页面都是由服务器渲染出来的
用户在浏览器中输入URL后, 浏览器向服务器发出请求
服务器直接生产整个渲染好的html页面, 返回给客户端进行展示
一个网站有那么多个页面, 服务器是怎么处理的呢?
- 一个页面对应一个URL
- URL会发送给服务器, 服务器通过正则对URL进行匹配, 并且最后交给一个Controller进行处理
- Controller进行各种各样的处理后, 将最终生成的HTML页面, 返回给前端
- 这就完成了一个IO(input/output)操作
以上的操作就是后端路由(也称为后端渲染)
- 当页面需要请求不同的页面路径内容的时候, 全部交给后端服务器处理, 后端服务器渲染好整个页面后, 将页面返回给客户端
- 这种情况下渲染好的页面, 不需要单独加载任何的js和css, 因为在后端服务器已经加载完毕了, 可以直接交给浏览器展示, 这样的操作有利于SEO(搜索优化)
后端路由(后端渲染)的缺点
- 整个页面的模块由后端人员来编写和维护
- 前端开发人员如果要开发页面, 需要通过PHP和java等语言来编写页面代码
- 而且通常情况下, HTML代码和数据以及它们的对应逻辑会混合在一起, 编写和维护都是非常糟糕的事情
总流程就是, 后端路由就是, 客户端输入URL请求页面, 服务器端接收URL, 服务器端处理URL和页面的映射关系, 服务器端通过java从数据库中读取数据结合html和css加载整个页面, 将整个页面返回给客户端

前后端分离阶段

随着Ajax的出现, 就有了前后端分离的开发模式
前端通过Ajax请求数据, 后端提供API来返回数据, 前端通过JavaScript将返回来的数据渲染到页面中
这样做的最大优点就是将前后端的责任清晰化, 前端专注于交互和可视化, 后端专注于数据
并且在移动端(IOS/Android)出现后, 后端不需要再开发其他的接口, 依然使用之前的一套API即可
目前很多网站都是采用这种开发模式
总流程是, 前后端分离就是, 客户端输入URL请求页面的时候, 服务器会先从静态资源服务器中返回html+css+js, 然后在前端使用js代码通过Ajax请求API数据, 服务器端再提供API接口服务, 在前端接收到API数据后渲染页面
大部分代码都是在前端执行并渲染的, 所以叫前端渲染

单页面富应用(SPA)阶段

其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由
也就是前端来维护一套路由规则
静态资源服务器中的html+css+js代码只有一套, 这一套代码包含了很多的组件, 用户在客户端请求页面的时候, 会将这一套代码全部返回给客户端, 用户在该页面请求其他页面的时候, 通过前端路处理URL和页面映射关系, 然后通过Ajax请求API数据, 实现显示不同的组件

一些概念问题

如何区分前端渲染和后端渲染
- 前端渲染就是大部分代码都是在前端执行并且渲染
- 后端渲染是指客户端请求页面时, 后端服务器渲染整个页面并返回,称为后端渲染
什么是前后端分离
- 前端负责页面交互和可视化, 通过Ajax来请求数据, 后端专注于数据
什么是前端路由,什么是后端路由
- 前端路由是指, 在前端处理URL和页面的映射关系
- 后端路由是指, 在客户端发送URL请求后, 在后端服务器处理URL和页面的映射关系

前端路由的核心: 改变URL, 但是页面不进行整体的刷新

通过改变URL的hash值
- URL的hash也就是锚点(#), 本质是改变window.loaction和href属性
- 我们可以通过直接复制loaction.hash来改变href, 但是页面不发生刷新
通过HTML5的history模式: pushState
- history接口时HTML5新增的, 它有五种模式改变URL而不刷新页面
  - history.pushState(state, title, url), 通过栈结构压入一个新的URL
  - history.replaceState(), 修改当前的 history 实体。通过这个接口改变的URL, 不能使用history.back() 后退历史记录
  - history.go(num) 前进或者后退指定数量历史记录 num可以时负数, 代表后退
  - history.back() 后退, 相当于history.go(-1)
  - history.forward() 前进, 相当于history.go(1)

vue-router的安装

我们已经学习过webpack了, 后续开发都是通过工程化的方式进行开发
- 所以在后续, 我们直接使用npm进行安装路由即可
步骤一: 安装路由vue-router (在使用脚手架初始化项目的时候, 会询问是否安装vue-router, 如果安装过了可以在package.json中看到已经有vue-router模块了, 那就不需要再安装了, 如果当时没有安装, 那么现在就可以用npm安装)
- 在当前项目目录下, 命令行输入 npm install vue-router --save(注意时运行时依赖安装)
步骤二: 在模块化工程中使用路由(因为vue-router是一个插件, 所以要通过Vue.use()来安装路由功能)
- 第一步: 在src文件夹中的router文件夹中的index.js文件中(遵循模块化管理代码), 导入vue-router和vue, 并且调用Vue.use()来安装路由功能
- 第二步: 创建路由实例, 并且编写路由映射配置
- 第三步: 在Vue实例中挂载创建的路由实例

// 这是src/router/index.js 中的代码
// 引入路由需要的相关模块 vue 和 vue-router
import Vue from "vue";
import VueRouter from "vue-router";// 构建路由需要三步
// 1. 通过Vue.use() 使用路由
Vue.use(VueRouter);// 2. 创建一个路由实例
// 抽离出来的路由与组件的映射关系
const routes = []const router = new VueRouter({// 编写路由与组件的映射关系, 可以将其抽离出去// 注意这个option名 必须是routesroutes
})// 3. 将路由导出, 并在main.js中的Vue实例中挂载创建的路由实例
export default router;

// 在main.js中导入并在Vue实例中挂载创建的路由实例
// 导入router路由
import router from './router/index'
new Vue({// ...// 挂载路由实例// router : router  可以简写成, 对象增强语法router
})

vue-router的使用

第一步: 创建路由组件, 因为路由时一个一个的url和组件的映射关系, 所以先创建好路由组件
第二步: 配置路由映射, 在router文件夹中的index.js 中配置组件和路径的映射关系
第三步: 在根组件中, 通过标签 router-link 和 router-view 使用路由
- router-link>: 这个标签是一个vue-router中内置的组件, 它最终会被渲染成一个 a 标签
- router-view>: 这个标签会根据当前的路径, 动态渲染出不同的组件
- 网页的其他内容, 比如顶部的标题/导航, 或者底部的一些版权信息等等回合 router-view> 处于同一个等级
- 在路由切换的时候, 切换的是 router-view> 中挂载的组件, 其他内容是不会发生改变的

// 这里时在src/components文件夹中的两个子组件
// 这些是Home组件中的代码
<template><div><h2>{{ message }}</h2><p>我是Home内容</p></div>
</template><script>
export default {name: "Home",data() {return {message: "这里是首页",};},
};
</script>// 这个时About组件的代码
<template><div><h2>{{ message }}</h2><p>我是关于里面的内容</p></div>
</template><script>
export default {name: "About",data() {return {message: "这里是关于",};},
};
</script>

// 这些是src/router文件夹中的index.js代码
// 引入相关的组件
import Home from "../components/Home.vue";
import About from "../components/About.vue";// 这是抽离出来的路由与组件的映射关系
const routes = [// 一条映射信息就是一个对象, 对象中的path和component构成一个映射{path: "/home",  // 用的是path, 而不是url, 因为url是一个完整的地址, 我们只需要修改地址中的一部分, 所以用pathcomponent: Home // 挂载组件},{path: "/about",component: About}
]

// 在根组件中的template中使用<router-link> 和 <router-view> 来使用路由
<template><div id="app"><router-link to="/home">首页</router-link> // 这个标签会根据 to属性中的值来修改 url, 此时<router-view>显示对应的组件<router-link to="/about">关于</router-link><router-view></router-view>  // 这个标签是用来决定组件显示的位置的</div>
</template>

路由的默认路径

在通常情况下, 我们输入网站URL, 进入网站的首页, 我们希望 router-view 直接渲染出首页的内容
但是现在, 默认是没有显示首页的组件内容的, 而是要用户点击了首页的 router-link 标签才会显示
那么如何让路径默认跳转到首页, 而且 router-view 渲染首页组件呢?
- 非常简单, 只要在路由配置中多配置一个映射就可以了
  - 配置内容为 path: “/” 这里的意思是, 配置根路径
  - redirect : “/name” redirect翻译为重定向, 就是重新定义方向
- 配置解析
  - 在routes中新配置一个映射
  - path 配置的是一个根路径 “/”
  - redirect是重定向, 表示我们将根路径重新定向到 /home 的路径下,这样我们就可以等我们想要的结果了

// 这里是路由配置的index.js文件
// ...
const routes = [// ...{path : "/", // 将path配置为根路径redirect : "/home" // 重定向, 将根路径重新定向给 /home}
]

HTML5的History模式

通过改变hash值来改变网页的URL, 地址末尾会有一个/# 不好看
如果通过HTML5的history模式来改变网页的URL, 地址就会好看很多
只要进行对路由配置文件进行简单的配置即可
- 在路由配置文件中那个的router实例中添加一个option
- mode : “history” 其实这个option值默认是hash, 只是我们手动把它改成history而已

// 这里是路由配置文件 index.js 的代码
const router = new VueRouter({// 编写路由与组件的映射关系, 可以将其抽离出去routes,// 将修改url中的hash值来改变展示的组件, 转换为通过history方法来改变mode : "history"
})

router-link 标签的补充

在前面我们只用了 to 这个属性来指定跳转的路径
router-link 还有一些其他的属性
- tag : router-link标签默认最终会渲染成 a 标签, 通过tag 属性, 我们可以修改router-link标签最终会渲染成什么标签, 比如设置 tag=“button”, 则该router-link标签最终会被渲染成button标签
- replace : replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个路径, 使用方法: 直接给router-link标签添加replace属性即可, 这个属性没有值
- active-class: 当router-link标签对应的路由匹配成功时, 会自动给当前标签设置了一个router-link-active的class类名, 我们可以通过这个类名修改活动的router-link标签的样式, 设置active-class可以修改这个router-link-active这个默认类名
  - 关于router-link-active类, 在进行高亮显示的导航菜单或者底部tabbar时, 会使用这个类
  - 一般不会修改这个默认的类名, 直接使用默认的router-link-active类名即可
- 还有另外一种方法改变router-link-active这个默认类名
  - 在路由配置文件 index.js中的路由实例对象中添加 linkActiveClass 选项, 值为要修改成的类名, 也可以修改这个默认类名

<template><div id="app">// 通过tag改变最终渲染成的标签// 通过replace禁止使用后退功能// 通过active-class改变默认的 router-link-active 类名<!-- <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 to="/home" tag="button" replace>首页</router-link><router-link to="/about" tag="button" replace>关于</router-link><router-view></router-view></div>
</template>

通过代码来实现路由跳转

有的时候, 页面的跳转可能需要执行对应的JS代码, 这个时候可以使用第二种跳转方式
本质上为跳转的标签监听事件, 通过methods方法来实现跳转
- 注意不能在方法中通过修改 history.pushState 的值来实现跳转, 这样会跳过了 vue-router 组件
- $router时vue-router 模块给每一个组件构造器添加的
- 通过 this.$router.push(“要跳转的路径”) 来实现跳转
- 如果想要禁止后退功能, 那么就将push方法改成replace方法即可

<template><div id="app"><!-- 通过代码来实现路由跳转 --><button @click="homeClick">首页</button><button @click="aboutClick">关于</button><router-view></router-view></div>
</template><script>
export default {name: "App",methods: {// 通过监听事件来使用 $router 中的方法来实现跳转homeClick() {// 这个$router 时vue-router 模块绑定到所有的组件构造器中的// this.$router.push("/home");// 如果想要做到禁用后退键的效果, 可以使用replace方法this.$router.replace("/home");},aboutClick() {// this.$router.push("/about");this.$router.replace("/about");},},
};
</script>

动态路由

在某些情况下, 一个页面的path路径是不确定的, 比如我们进入用户界面的时候, 希望路径是这样的
- /user/aaa 或者 /user/bbb
- 除了前面的/user之外, 后面还跟上了用户的ID
- 这种path和component的匹配关系, 我们称为动态路由
如何实现动态路由
- 第一步: 在组件的路由设置中path, 通过冒号 : 表示后面的路径是不确定的
- 第二步: 使用v-bind 绑定根组件的 router-link 中的 to 属性, 使其值 = 确定的路径 + 一个从data传过来的数据

// 这里使路由设置index.js的代码
const routes = [// ...{path : "/user/:userId",  // 这里的 /user/ 为确定的路径, :userId 为不确定的路径, 不过要记住冒号后面的名字, 因为可以在组件中获取这个名字 component : User}]

<template><div id="app">// 通过v-bind绑定 to 来使to可以使用组件构造器中的数据<router-link :to="'/user/' + Id" tag="button" replace>用户</router-link><router-view></router-view></div>
</template><script>
export default {name: "App",data() {return {Id: "lisi",  // 这个Id 模拟从服务器接收的数据};},
};
</script>

传递活动的路由的数据

前面讲到vue-router 有一个 $router 对象, 里面有方法可以实现路径的跳转
vue-router 中还有一个对象, 为 $route , 这个对象获取的是页面中当前活跃的路由
$route是一个路由对象 (route object) 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录 (route records)。
这个对象有很多属性, 可以查看 vue-router 的官方文档
$route.params 这个属性是一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。

<template><div><h2>{{ userId }}</h2></div>
</template><script>
export default {name: "User",computed: {userId() {// $route对象, 是页面中当前活跃的路由// 通过params获取路由中的path 中对应的字符串return this.$route.params.userId;},},
};
</script>

vue打包文件解析

命令行输入 npm run build 后, 就会对项目进行打包
- 打包完成后项目中会生成一个新的文件夹名叫 dist
dist文件夹解析
- static文件夹: 里面包含两个文件夹, css文件夹和 js文件夹
  - css文件夹: 里面存放的是我们的css代码
  - js文件夹: 里面存放的是我们的js代码
    - app.xxxx.js文件: 存放的是我们的业务代码, 也就是我们自己写的代码
    - manifest.xxxxx.js文件: 存放的是底层支撑的代码, 比如说, 支撑模块和模块之间的导入导出等等
    - vendor.xxxxx.js文件: 存放的是提供商也就是第三方的代码, 比如, vue的代码, vue-router的代码等等
- index.html文件: 入口HTML文件

认识路由的懒加载

官方解释
- 在打包构建应用的时候, JavaScript 文件会变得非常大, 会影响页面的加载
- 如果我们能把不同路由对应的组件分割成不同的代码块, 然后当路由被访问的时候才加载对应组件, 这样就更加高效了
通俗地说
- 首先, 我们知道路由中通常会定义很多不同的页面
- 但是这些页面最后都被打包到一个js文件中
- 那么多的页面全放在一个js文件中, 这个页面必然会很大
- 如果我们一次性从服务器请求下这个页面, 可能会花费一定的事件, 甚至用户的电脑上还出现了短暂空白的情况
- 要避免这种情况, 就要使用路由懒加载
路由懒加载做了什么
- 路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块, 一个组件打包成一个js文件
- 在当这个路由被访问到的时候, 才加载对应的组件

懒加载的方式

每种方式的使用方法都是改变路由配置 index.js 文件中的导入组件的方式来达到懒加载
方式一: 结合Vue的异步组件和webpack的代码分析 (这种方式已经很古老了, 不用了嗷)
- const Home = resolve => { require.ensure([’…/components/Home.vue’], () => { resolve(require(’…/components/Home.vue’)) })};
方式二: AMD写法 (比方式一好一点)
- const Home = resolve => require([’…/components/Home.vue’], resolve);
方式三: 在ES6中, 我们有更加简单的写法来组织Vue异步组件和Webpack的代码分割 (代码简洁, 推荐)
- const Home = () => import("…/components/Home.vue")

// 这里是路由配置 index.js 文件中的代码
// 引入相关的组件
/* import Home from "../components/Home";
import About from "../components/About";
import User from "../components/User"; */  // 不用这里的引入方法了// 使用懒加载来引入相关组件
const Home = () => import("../components/Home");
const About = () => import("../components/About");
const User = () => import("../components/User");

嵌套路由

嵌套路由是一个很常见的功能
- 比如在home页面中, 我们希望通过 /home/news 和 /home/message 访问一些内容
- 一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件
实现嵌套路由有两个步骤
- 第一步: 创建对应的子组件, 并在路由映射中配置对应的子路由
  - 注意!!! 嵌套的子路由path的路径前不能加 /
- 第二步: 在组件内部使用 router-view 标签

// 这里是创建的两个子组件
<template><div><ul><li v-for="item in news">{{ item }}</li></ul></div>
</template><script>
export default {name: "HomeNews",data() {return {news: ["新闻1", "新闻2", "新闻3", "新闻4"],};},
};
</script><template><div><ul><li v-for="item in messages">{{ item }}</li></ul></div>
</template><script>
export default {name: "HomeMessage",data() {return {messages: ["消息1", "消息2", "消息3", "消息4"],};},
};
</script>

// 这里是路由配置 index.js 文件
const routes = [{path: "/home",  // 用的是path, 而不是url, 因为url是一个完整的地址, 我们只需要修改地址中的一部分, 所以用pathcomponent: Home, // 挂载组件// 在路由的内部添加children 的option来定义子路由, 数组类型children : [{path : "",redirect : "news" // 设置默认路由},{path : "news",  // 注意嵌套在路由里面的路由路径前面不能加 /component : HomeNews},{path : "message",component : HomeMessage}]}
]

URL解析

一般来说一个URL长这样: scheme://host.domain:port/path?query#fragment
- scheme: 协议
- host: 主机
- domain: 域名
- port: 端口号
- path: 路径
- query: 查询
- fragment: 片段, hash

传递参数的方式

传递参数主要有两种类型: params 和 query
params的类型
- 配置路由格式: /router/:id
- 传递的方式: 在path后面跟上对应的值
- 传递后形成的路径: /router/123, /router/abc
- 前面标题为传递活动的路由的数据有详细用法
query的类型
- 配置路由格式: /router, 也就是普通配置
- 传递的方式: 对象中使用query的key作为传递方式
- 传递后形成的路径: /router?id=123, /router?id=abc
- 具体操作
  - 第一步, 用v-bind为想要传递的router-link标签的 to 属性进行属性绑定, 值为一个对象, 对象中有两个属性, 第一个是path, 值为要传递的路由路径, 第二个为query, 值为一个对象, 里面为要传递的数据
  - 第二步, 在对应的子组件中, 在组件构造器中computed中使用 $route.query 来接收传递过来的数据,
  - 第三步, 处理数据, 使用数据

// 第一步 这里是根组件的代码
<router-link :to="{ path: '/profile', query: { name: 'xiaoLam', age: 18, height: 1.7 }}" tag="button">档案</router-link>

<template><div><h2>我是Profile组件</h2><p>我是Profile里的信息</p><ul>// 使用数据<li v-for="(item, key) in userData">{{ key }} : {{ item }}</li></ul></div>
</template><script>
export default {name: "Profile",computed: {userData() {  // 接收传递过来的数据// 这里的$route对象是Vue中prototype中的对象, 这个对象是当前活跃的路由组件return this.$route.query;},},
};
</script>

$route 和 $router 的区别

$router本质是VueRouter实例, 就是一个对象包含所有的路由, 想要导航到不同的URL, 则使用 $router.push() 方法
$route为当前活跃的路由组件对象

两个问题

为什么我们可以在各个组件中使用 $router 和 $route?
- 是因为所有组件都是来自, Vue类的原型prototype
- 而Vue类的原型prototype中就定义了, $router 和 route,而且通过一些方法将所有的路由赋值给了route, 而且通过一些方法将所有的路由赋值给了route,而且通过一些方法将所有的路由赋值给了router, 将当前活跃的路由组件赋值给了$route
- 所以我们可以在组件中使用这两个属性
为什么我们可以在组件模板中中使用 router-link 和 router-view 这两个标签
- 是因为Vue在全局中注册了这两个组件

为什么要使用导航守卫

需求, 在一个SPA应用中, 如何修改网页的标题呢?
- 网页标题是通过 title 标签来现实的, 但是SPA只有一个固定的HTML, 切换不同的页面的时候, 标题并不会改变
- 但是我们可以通过JavaScript中 document.title来修改 title 中的内容 window.document.title = “新的标题” (window可以省略)
- 那么在Vue项目中, 在哪里修改? 什么时候修改比较合适呢?
普通的修改方式
- 很容易想到的修改标题的位置是每一个路由对应的组件.vue文件中
- 通过生命周期函数, 执行对应的代码来修改即可
- 但是当页面较多的时候, 这种方式不容易维护(因为要在多个页面执行类似的代码)
使用导航守卫
- 什么是导航守卫
  - vue-router 提供的导航守卫主要用来监听路由的进入和离开的
    - beforEach 守卫函数, 会在路由即将改变前触发, 这个守卫函数需要传入一个函数作为参数
      - 这个传入的函数包含三个参数, to, from, next
      - to : 即将要进入的目标的路由对象
      - from : 当前导航即将要离开的路由对象
      - next : 调用了该方法后, 才能进入下一个钩子, 前置守卫函数必须调用这个方法
    - afterEach 守卫函数, 会在路由改变后触发, 这个守卫函数也需要传入一个函数作为参数
      - 这个传入的函数包含两个参数, to , from
      - 这两个参数的含义与beforEach中的函数的参数含义相同
      - 后置守卫函数不需要调用next

// 普通的修改方式
// 这里是vue组件中的代码
<script>
export default {name: "Home",data() {return {message: "这里是首页",};},// 我们可以通过Vue的生命周期函数来修改 document.title// 生命周期函数有很多，这里只使用了created函数， 其会在为路由创建的时候调用// 但是这样的做的话, 每一个组件都需要添加一个created生命周期函数, 代码重复度很高, 所以我们可以通过在路由配置index.js文件中通过导航守卫, 来修改document.titlecreated() {document.title = "首页";},
};
</script>

// 导航守卫写法
// 通过 路由实例中的 beforeEach 方法来监听路由即将改变前事件
// 这个方法需要传入一个参数, 这个参数是一个函数
// 这个函数包含三个参数, 第一个参数为to, 第二个参数为from, 第三个参数为next(其本质是一个函数)
// to指要跳转到的路由, from指从哪个路由跳转, next指进行下一步操作, [注]必须调用next函数,进行下一步,否则路由不会跳转了
// to和from都是是一个路由对象里面包含整个路由的所有信息, 包括其父路由
router.beforeEach((to, from, next) => {// 如果存在路由嵌套的话, 直接用meta是拿不到元数据的// 要通过to对象中的metched数组中下标为0的数据中的meta对象来获取预先在路由中设置的元数据// meta翻译为元数据（描述数据的数据document.title = to.matched[0].meta.title;next(); // 调用next函数进行下一步
})

导航守卫补充

补充一: 上面已经提到了, 后置守卫函数afterEach 是不需要主动调用next()函数的
补充二: next()函数里面也是可以传入参数的, 具体可以浏览 vue-router 的官网
补充三: 上面所说的两个导航守卫都是全局守卫
- 导航守卫还有路由独享的守卫和组件内守卫

keep-alive组件

keep-alive是Vue内置的一个组件, 可以使被包含的组件保留状态, 或者避免重新渲染
- keep-alive组件有两个生命周期钩子函数
  - activated(), 这个函数会在组件进入活跃的时候调用
  - deactivated(), 这个函数会在组件离开活跃之前的时候调用
  - 注意, 这两个函数只能在存在keep-alive组件的情况下使用

如何实现切换路由的时候保留组件状态

首先: 如果组件中具有组件嵌套, 而且有自动跳转默认组件的话, 需要在路由配置 index.js文件中取消自动跳转
实现思路: 在组件中的data中存储离开路由前的路由路径, 在再次回到该路由的时候再将路由设置为离开路由前的路由路径达到保留组件状态的效果
具体操作
- 第一步: 在组件的data中存储默认的路由路径
- 第二步, 通过keep-alive中的activated() 函数, 在组件进入活跃的时候, 使用 $router.push() 方法, 将路由路径设置为默认路由路径
- 第三步, 通过导航守卫中的组件内守卫, beforeRouteLeave(to, from, next){} 将当前路由路径赋值给data中存储的默认路由路径
- 这样就可以达到切换路由的时候保留组件状态的效果
- 以后会有更好的方法达到这个效果

// 路由配置文件 index.js 中的代码
const routes = [{// ...children : [// 要实现保留组件状态就不能自动跳转, 取消自动跳转/* {path : "",redirect : "news"}, */{path : "news",  // 注意嵌套在路由里面的路由路径前面不能加 /component : HomeNews},{path : "message",component : HomeMessage}]}
]

<script>
export default {name: "Home",data() {return {message: "这里是首页",path: "home/news", // 设置路由默认路径};},// 以下代码是实现如何在切换组件的时候 保留组件状态// 首先在组件的data中记录当前路由的路径// 在路由设置文件 index.js文件中取消自动跳转// 使用keep-alive组件中的 activated() 生命周期钩子函数 在路由创建的时候, 使用 $router.push 方法设置路径activated() {this.$router.push(this.path); // 使用$router.push方法设置路径},// 使用导航守卫中的组件内守卫, 记录离开当前组件时候的路由路径beforeRouteLeave(to, from, next) {// 导航离开该组件的对应路由时调用this.path = this.$route.path; // 记录离开当前组件时的路由路径next();},
};
</script>

keep-alive中的两个重要属性

keep-alive可以使被包含的组件保留状态, 或者避免重新渲染
但是我们有些组件就是要频繁的销毁和重新创建
这个时候就可以用到keep-alive标签中的两个重要的属性了
- include: 值为字符串或者正则表达式, 只有匹配的组件才会被缓存
- exclude: 值为字符串或者正则表达式, 匹配的组件都不会被缓存
- 注意, 有关正则表达式的代码都不能随意加括号

    <!-- 使用 keep-alive 标签将router-view标签 包起来 就可以让组件不被销毁 也就是保留组件状态 --><!-- 如果某些组件就是需要频繁的销毁和创建, 那么就用到了keep-alive中的exclude属性了 --><!-- 注意与正则表达式相关的代码不能随意加空格 --><keep-alive exclude="Profile,User">  <router-view></router-view></keep-alive>

Vue学习笔记之15-vue-router详解相关推荐

「Vue 学习笔记 1」Vue 项目快速搭建，初始项目各个文件夹作用介绍和启动代码执行流程分析
「Vue 学习笔记 1」Vue 项目快速搭建,初始项目各个文件夹作用介绍和启动代码执行流程分析前言一.我的开发环境二.使用 Vue CLI (Vue 脚手架)快速搭建项目三.初始项目的目录结构 ...
小猫爪：i.MX RT1050学习笔记26-RT1xxx系列的FlexCAN详解
i.MX RT1050学习笔记26-RT1xxx系列的FlexCAN详解 1 前言 2 FlexCAN简介 2.1 MB(邮箱)系统 2.1.1 正常模式下 2.1.2 激活了CAN FD情况下 2. ...
JDBC学习笔记02【ResultSet类详解、JDBC登录案例练习、PreparedStatement类详解】
黑马程序员-JDBC文档(腾讯微云)JDBC笔记.pdf:https://share.weiyun.com/Kxy7LmRm JDBC学习笔记01[JDBC快速入门.JDBC各个类详解.JDBC之CR ...
IP地址和子网划分学习笔记之《IP地址详解》
在学习IP地址和子网划分前,必须对进制计数有一定了解,尤其是二进制和十进制之间的相互转换,对于我们掌握IP地址和子网的划分非常有帮助,可参看如下目录详文. IP地址和子网划分学习笔记相关篇章: 1.I ...
我的学习笔记——CSS背景渐变(Gradients)详解
我的学习笔记--CSS背景渐变(Gradients)详解一.线性渐变(Linear Gradients) 1.语法 background-image: linear-gradient(directi ...
IP地址和子网划分学习笔记之《子网划分详解》
一,子网划分概述 IP地址和子网划分学习笔记相关篇章: 1.IP地址和子网划分学习笔记之<预备知识:进制计数> 2.IP地址和子网划分学习笔记之<IP地址详解> 3.IP地址和 ...
Vue学习笔记1---初识vue
1.vue的前世今生在vue之前,有angular.react前端框架,vue算是后起之秀. 2013年 [中]尤雨溪大佬的GitHub主页 ^_^ gigyyx990803 (Evan You ...
vue学习笔记十：Vue中引入jquery
文章目录前言一.引入方式 1.使用Vue CLI 创建的项目 2.直接引入vue方式的项目二.使用方法 1.使用Vue CLI 创建的项目 2.直接引入vue方式的项目总结前言本篇实现vu ...
redis学习笔记(2)之redis主从详解
redis主从详解主从详解主从配置拓扑原理数据同步概念复制偏移量复制积压缓冲区主节点运行ID Psync命令全量复制流程部分复制流程心跳缓冲大小调节读写分离内容来源为六星 ...
redis学习笔记(7)之redis哨兵详解
redis哨兵详解 sentinel命令客户端连接素材代码思路实现过程哨兵的切换实现原理发布订阅基础哨兵的实现原理部署建议需要关注的问题代码流程内容来源为六星教育,这里仅作为学习 ...

Vue学习笔记之15-vue-router详解

什么是路由

认识web开发的三个阶段

后端路由阶段

前后端分离阶段

单页面富应用(SPA)阶段

一些概念问题

前端路由的核心: 改变URL, 但是页面不进行整体的刷新

vue-router的安装

vue-router的使用

路由的默认路径

HTML5的History模式

router-link 标签的补充

通过代码来实现路由跳转

动态路由

传递活动的路由的数据

vue打包文件解析

认识路由的懒加载

懒加载的方式

嵌套路由

URL解析

传递参数的方式

$route 和 $router 的区别

两个问题

为什么要使用导航守卫

导航守卫补充

keep-alive组件

如何实现切换路由的时候保留组件状态

keep-alive中的两个重要属性

Vue学习笔记之15-vue-router详解相关推荐

最新文章

热门文章