随笔分类 - Vue / Vue Router
摘要：路由器的两种工作模式 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。 hash值不会包含在 HTTP 请求中，即：hash值不会作为路径的一部分随着http请求带给服务器。【#/。。。】 hash模式：默认的工作模式 地址中永远带着#号，路由的名是以hash值的形式呈现
阅读全文
摘要：路由守卫 作用：对路由进行权限控制，满足一定条件才能看到跳转到的路由组件 分类：全局守卫、独享守卫、组件内守卫 全局守卫: // src/router/index.js // router：我们创建的路由器实例 // router.beforeEach(function)：每一次进行路由跳转之前都会
阅读全文
摘要：两个新的生命周期钩子 缓存路由组件和定时器一起使用时，如果进行了路由跳转，本应触发在beforeDestroy钩子中清除定时器方法，但因为缓存了路由组件，就导致原来的路由组件的beforeDestroy钩子不会被触发，定时器也就不会清除 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态
阅读全文
摘要：缓存路由组件 完善路由的技巧 作用：让不展示的路由组件保持挂载，不被销毁。 正常情况下，进行了路由跳转后，之前的组件会被销毁，如果之前的组件中存在input框之类的表单类组件，输入的内容也就消失了，也就是说，要保证路由跳转后不销毁之前的组件 具体编码： // 缓存的对象：并不是所有路由组件都需要
阅读全文
摘要：编程式路由导航 作用：不借助<router-link> 实现路由跳转，让路由跳转更加灵活。 为什么需要除了<router-link>标签之外实现路由跳转的方式？ <router-link>标签最后变为<a>标签，无法实现button按钮的跳转 触发路由跳转可能需要异步触发，<router-link>
阅读全文
摘要：<router-link>的replace属性 作用：控制路由跳转时操作浏览器历史记录的模式 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，不破坏栈中的任何一条数据，不断的压入数据，replace是替换掉当前栈顶的那一条记录。路由跳转时候默认为push 注：
阅读全文
摘要：路由的props配置项 路由组件读取其他组件传递的参数时，是通过$route.params.id这种方式读取的，$route.params 部分代码冗余度高，如何能够降低这种冗余？props配置项可以做到 作用：让路由组件更方便的收到参数 { name:'xiangqing', path:'
阅读全文
摘要：命名路由 命名路由：给你的路由规则起个名字 作用：可以简化路由的跳转【路由层级比较多时】。 如何使用 给路由规则命名： { path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ { nam
阅读全文
摘要：路由传参 如何给路由组件传递参数 点击导航区的时候将数据带给路由组件，展示区根据数据渲染组件，渲染的都是同一个组件，只不过数据不同 路由组件可以接收两种参数：query参数和params参数 这两种参数的写法与Ajax中query参数和params参数的写法是一样的 1. query参数 传递参数
阅读全文
摘要：嵌套（多级）路由 展示区中包含了新的导航区和展示区 配置路由规则，使用children配置项： routes:[ //routes中直接配置的是一级路由 { path:'/about', component:About, }, { path:'/home', component:Home, chil
阅读全文
摘要：几个注意点 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。 通过组件的使用方式不同将组件划分为不同的分类：路由组件和一般组件 路由组件：靠路由规则匹配出来，由路由器帮我们渲染的组件【我们没有亲自写过这种组件标签】 一般组件：我们亲自写的组件标签 路由组件从某种意义
阅读全文
摘要：使用步骤 安装vue-router，命令：npm i vue-router 导入并应用插件 // main.js import VueRouter from 'vue-router' Vue.use(VueRouter) 创建src/router/index.js，该文件专门用于创建整个应用的路由器
阅读全文
摘要：路由 1. SPA应用 单页Web 应用（single page web application，SPA）。 整个应用只有一个完整的页面（index.html）。 点击页面中的导航链接不会刷新页面，页面不会跳转，只会做页面的局部更新。 数据需要通过ajax 请求获取。 注：多页面应用，多个页面来回跳
阅读全文
