Vue Cli的使用（三）Vue Router（下）

最新推荐文章于 2022-10-12 20:52:57 发布

未入流的小邹

最新推荐文章于 2022-10-12 20:52:57 发布

阅读量114

点赞数

分类专栏： vue-router vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/zouzi1/article/details/117374040

版权

vue 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

vue-router

3 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue CLI项目中实现嵌套路由，包括创建子组件、配置子路由以及路由参数的params和query使用。此外，还涵盖了导航守卫的概念及其在组件间状态管理和URL变化时的作用。最后，讨论了Keep-alive特性用于组件状态保留和路由的生命周期管理。

摘要由CSDN通过智能技术生成

Vue Cli的使用（三） Vue-Router（下）

路由的嵌套

嵌套路由是一个常见的功能，比如在home页面想通过/home/new和/home/message访问一些内容，一个路径映射一个组件，访问这两个路径也会分别渲染两个组件
实现嵌套路由有一下两个步骤：
一：创建相应的子组件，并且在路由映射中配置对应的子路由
二：在组件内部使用router-view标签
在这里插入图片描述

路由的参数传递

路由的传递参数主要有两种类型：params和query
params的类型
配置路由格式：/router/id
传递的方式：在path后面跟上对应的值
传递后形成的路径：/router/123，/router/abc
query的类型
配置路由的格式：/router，也就是普通配置
传递的方式：在对象中使用query的key作为传递方式
传递后形成的路径：/router？id=123，/router？id=abc
两种方式的不同可以通过URL的格式：
protocol : // hostname[:port] / path / [;parameters][?query]#fragment
来决定

juery类型传递参数

前面已经讲了params类型传递的参数，接下来讲解另一个类型juery类型传递
在这里插入图片描述

当然上面可通过router-link也可以转化成使用JS代码来

router和route之间的区别

在这里插入图片描述

$router为vueRouter实例，想要导航到不同的URL，则要使用 $ router.push方法， $route为当前router跳转到对象里面获取name,path,query,params等，

user组件可以使用

Vue Router的导航守卫

通过修改每一个组件当中标题的位置，通过create周期方法来实现，它是在组件生成时实现方法。不过这种方式在较多页面时不容易维护（因为需要在多个页面执行类似的代码）因此我们可以采用导航守卫。
在这里插入图片描述

什么是导航守卫？
vue router提供的导航守卫主要用来监听路由的进入和离开的
vue router提供了beforeEach和afterEach的钩子函数，它们会在路由即将发生改变前和改变后触发

在全局守卫中还有一个afterEach的方法，是在组件实例化之后生效的
在这里插入图片描述

还有路由独享的守卫，详细的教程可去这个官方网址：
Vue -Router

课外需求

想要将Home中的页面状态进行保留
在这里插入图片描述
**由于在网页中点击这个组件会生成组件，当你点击其他组件时这个组件会被销毁，因此我们需要用生命周期函数**

在这里插入图片描述

Keep-alive

keep-alive时Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染
属性：include和exclude
include：字符串或正则表达式，只有匹配的组件才会被缓存
exclude：字符串或正则表达式，任何匹配的额组件都不会被缓存
router-view也是一个组件，如果直接被包裹在keep-alive里面，所有路径匹配到的视图组件都会被缓存
在about中也放进生命周期函数
在这里插入图片描述