vfjcgg的博客

vue-router-keep-alive及其他问题和属性介绍 keep-alive遇见vue-router keep-alive是Vue内置的一个组件，可以使用被包含的组件保留状态，或避免重新渲染。 它里面有两个非常重要的属性： 1.include - 字符串或正则表达式，只有匹配的组件会被缓存 2.exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存 router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存： <!--正则表达式

vue-router-全局导航守卫 为什么使用导航守卫？ 考虑一个需求：在一个SPA应用中，如何改变网页的标题呢？ 网页标题是通过< title >来显示的，但是SPA只有一个固定的HTML，切换不同的页面时，标题并不会改变 但是可以通过JavaScript来修改< title >的内容.window.document.title = ‘新的标题’ 那么在Vue项目中，在哪里修改？什么时候修改比较合适呢？ matched v. 敌得过；和…相配（match的过去式和过去分词） adj

vue-router-参数传递 准备工作 第一步：创建新的组件Profile.vue 第二步：配置路由映射 第三步：添加跳转的< router-link > 传递参数的方式 传递参数主要有两种类型：params和query params的类型： 配置路由格式：/router/:id 传递的方式：在path后面跟上对应的值 传递后形成的路径：/router/123 , /router/abc query的类型： 配置路由格式：/router，也就是普通配置 传递的方式：对象中使用query的key

vue-router-路由的嵌套使用 嵌套路由是一个很常见的功能 比如在home页面中，希望通过/home/news和Home/message访问一些内容 一个路径映射一个组件，访问者两个路径也会分别渲染这两个组件 路径和组件的关系如下： 实现嵌套路由有两个步骤： 1.创建对应的子组件，并且在路由映射中配置对应的子路由 2.在组件内部使用< router-view >标签 ul>li{消息$}*4 简便写法 先在components组件文件夹中建两个.vue文件 然后在index

vue-router-打包文件的解析 认识路由的懒加载 当打包构建应用时，JavaScript包会变得非常大，影响页面加载 如果能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 dist文件夹下static文件夹下js文件夹下的三个文件分别的作用： ...

vue-router-动态路由的使用 动态路由 在某些情况下，一个页面中的path路径可能是不确定的，比如我们进入用户界面时，希望是如下路径： / user /aaa 或 / user /bbb 除了有前面的/user之外，后面还跟上了用户的ID 这种path和component的匹配关系，我们称之为动态路由（也就是路由传递数据的一种方式） 配置路由映射关系之前要先将组件导入 index.js文件中配置的路由： { path:'/user/:userId', component:User

通过代码跳转路由

router-link的其他属性补充 在前面< router-link >中，我们只是使用了一个属性：to，用于指定跳转的路径 < router-link >还有一些其他属性： tag: tag可以指定< router-link >之后渲染成什么组件 <template> <div id="app"> <h2>我是App组件</h2> <router-link to="/Home" tag="but

路由映射配置和呈现出来 使用vue-router的步骤： 第一步：创建路由组件 第二步：配置路由映射：组件和路由映射关系 第三步：使用路由：通过和 路由的默认路径 默认情况下，进入网站首页我们希望渲染首页的内容。 但是现实中默认没有显示首页组件，必须让用户点击才可以 如何让路径默认跳到首页，并且渲染首页组件呢？ 只需要多配置一个映射就可以了 const routes=[ { //redirect重定向 path:'/', redirect:'/home' }, 配置解析：

vue-router-安装和配置方式 目前前端流行的三大框架，都有自己的路由实现： 1.Angular的ngRouter 2.React的ReactRouter 3.Vue的vue-router vue-router vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。 可以访问其官方网站对其进行学习：https://router.vuejs.org/zh/ 安装和使用vue-router 直接使用npm来安装路由即可 步骤一：安装vue-router n

URL的hash和HTML5的history URL的hsah URL的hash也就是锚点（#），本质上是改变window.location的href属性 可以通过直接赋值location.hash来改变href,但是页面不发生刷新 HTML5的history模式：pushState 类似于一个栈结构，先进后出的原理，把push进去的值放在一个栈里面，可以调用返回的方法，就相当于弹栈和入栈 pushState也可以改变URL但是页面不发生刷新 HTML5的history模式：replaceStat

什么是路由和其中映射关系 什么是路由？ 说起路由想到了什么？ 路由是一个网络工程里面的术语 路由（routing ）就是通过互联的网络把信息从源地址传输到目的地址的活动。 —维基百科 路由器提供了两种机制：路由和转送 路由是决定数据包从来源到目的地的路径 转送将输入端的数据转移到合适的输出端 路由有一个非常重要的概念叫路由表： 路由表本质上就是一个映射表，决定了数据包的指向 一个面试问题： 什么是前端渲染？什么是后端渲染？ 什么是前后端分离？ 什么是前端路由？什么是后端路由？ 后端渲染： jsp/php j