随笔分类 - vue-router
vue-router相关
摘要：使用 BrowserRouter 的问题（方案：后台自定义中间件，前提：前台和后台不要有路径重复） a. 问题: 刷新某个路由路径时, 会出现 404 的错误 b. 原因: 项目根路径后的 path 路径会被当作后台路由路径, 去请求对应的后台路由，但没有 c. 解决: 使用自定义中间件去读取返回
阅读全文
摘要：keep-alive 简介 keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 用法也很简单： <keep-alive> <component> <!-- 该组件将被缓存！ --> </component> </keep-alive> props incl
阅读全文
摘要：导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。（记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化，或使用beforeRouteUpdate的组件内守卫。） 具体有哪些？
阅读全文
摘要：本文简单介绍下三种路由传参： （1）在路由中配置 { path : ‘/home/:id’, name : ‘Dome’, component } 然后写调用的时候 this.$router.push({path : `/describle/${id}`}) 取值： $route.parms.id
阅读全文
摘要：router-link传参 【注意】 1、使用params方式传参时，只支持name跳转； 案例如下： 2、使用query传参，注意：两种都支持 案例如下 .
阅读全文
摘要：首先简单来说明一下$router和$route的区别 //$router : 是路由操作对象，只写对象 //$route : 路由信息对象，只读对象 //操作 路由跳转 this.$router.push({ name:'hello', params:{ name:'word', age:'11'
阅读全文
摘要：路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。 对此，vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。 导航守卫（navigation-guards）这个名字，听起来怪怪的，但既然官方文档是这样翻译的，就姑且这么
阅读全文
摘要：【一】分类 导航守卫分为：全局守卫、路由独享守卫、组件守卫三种 【二】全局守卫 指路由实例上直接操作的钩子函数，他的特点是所有路由配置的组件都会触发，直白点就是触发路由就会触发这些钩子函数，如下的写法。钩子函数按执行顺序包括beforeEach、beforeResolve（2.5+）、afterEa
阅读全文
摘要：【重点】 history与hash路由的区别 hash前端路由，无刷新 history 会去请求接口 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 如果不想要很丑的 hash，我们可以用路由的 hi
阅读全文
摘要：除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。 【语法】 .
阅读全文
摘要：审查代码，查看激活类名 （1）设置激活类名样式 （2）也可以在路由文件里配置激活类名的别名 （3）配置别名后再次审查，如下所示 此时可以直接配置active类名样式即可 此时便可以实现路由高亮效果 .
阅读全文
摘要：【步骤】 （1）路由配置 或者 （2）传递参数 或者 （3）接收传递参数 或者 【二】步骤小结 【三】参数形式 （1）上面这种是/100形式传递过去 （2）另外还有?count=100的格式，这便是get传值，如下所示，看【四】 【四】get传值 除了路由传值，也可以使用get传值 获取get传值
阅读全文
摘要：（1）公共路由裁减 不是每个页面都存在导航，所以不要把导航组件在根组件APP.vue里引入，哪个页面需要，在哪里引入即可。 方案： 哪个页面需要，在哪个页面引入即可 （2）嵌套路由 注意：children下的path无需/，它会自动补全匹配 接下来在相应页面渲染二级嵌套路由即可 （3）嵌套路由重定向
阅读全文
摘要：【一】步骤 （1）新建导航组件 （2）根组件引入 （3）也可以动态传递url 【注意】 （1）a链接与router-link对比 （2）其他写法 .
阅读全文
摘要：三种，第一种：是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子第三种：单独路由独享组件 .
阅读全文
