![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
router
Eli-sun
不断学习
展开
-
vue-router-keep-alive及其他问题和属性介绍
vue-router-keep-alive及其他问题和属性介绍keep-alive遇见vue-routerkeep-alive是Vue内置的一个组件,可以使用被包含的组件保留状态,或避免重新渲染。它里面有两个非常重要的属性:1.include - 字符串或正则表达式,只有匹配的组件会被缓存2.exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存router-view也是一个组件,如果直接被包在keep-alive里面,所有路径匹配到的视图组件都会被缓存: <!--正则表达式原创 2020-06-30 19:02:16 · 271 阅读 · 1 评论 -
vue-router-全局导航守卫
vue-router-全局导航守卫为什么使用导航守卫?考虑一个需求:在一个SPA应用中,如何改变网页的标题呢?网页标题是通过< title >来显示的,但是SPA只有一个固定的HTML,切换不同的页面时,标题并不会改变但是可以通过JavaScript来修改< title >的内容.window.document.title = ‘新的标题’那么在Vue项目中,在哪里修改?什么时候修改比较合适呢?matchedv. 敌得过;和…相配(match的过去式和过去分词)adj原创 2020-06-30 17:24:44 · 632 阅读 · 0 评论 -
vue-router-参数传递
vue-router-参数传递准备工作第一步:创建新的组件Profile.vue第二步:配置路由映射第三步:添加跳转的< router-link >传递参数的方式传递参数主要有两种类型:params和queryparams的类型:配置路由格式:/router/:id传递的方式:在path后面跟上对应的值传递后形成的路径:/router/123 , /router/abcquery的类型:配置路由格式:/router,也就是普通配置传递的方式:对象中使用query的key原创 2020-06-30 13:32:43 · 148 阅读 · 0 评论 -
vue-router-路由的嵌套使用
vue-router-路由的嵌套使用嵌套路由是一个很常见的功能比如在home页面中,希望通过/home/news和Home/message访问一些内容一个路径映射一个组件,访问者两个路径也会分别渲染这两个组件路径和组件的关系如下:实现嵌套路由有两个步骤:1.创建对应的子组件,并且在路由映射中配置对应的子路由2.在组件内部使用< router-view >标签ul>li{消息$}*4 简便写法先在components组件文件夹中建两个.vue文件然后在index原创 2020-06-30 11:13:37 · 6893 阅读 · 0 评论 -
vue-router-打包文件的解析以及路由懒加载的使用
vue-router-打包文件的解析认识路由的懒加载当打包构建应用时,JavaScript包会变得非常大,影响页面加载如果能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。dist文件夹下static文件夹下js文件夹下的三个文件分别的作用:...原创 2020-06-29 19:41:54 · 560 阅读 · 0 评论 -
vue-router-动态路由的使用
vue-router-动态路由的使用动态路由在某些情况下,一个页面中的path路径可能是不确定的,比如我们进入用户界面时,希望是如下路径:/ user /aaa 或 / user /bbb除了有前面的/user之外,后面还跟上了用户的ID这种path和component的匹配关系,我们称之为动态路由(也就是路由传递数据的一种方式)配置路由映射关系之前要先将组件导入index.js文件中配置的路由:{ path:'/user/:userId', component:User原创 2020-06-29 18:31:38 · 496 阅读 · 0 评论 -
通过代码跳转路由
通过代码跳转路由原创 2020-06-29 17:28:39 · 326 阅读 · 0 评论 -
router-link的其他属性补充
router-link的其他属性补充在前面< router-link >中,我们只是使用了一个属性:to,用于指定跳转的路径< router-link >还有一些其他属性:tag: tag可以指定< router-link >之后渲染成什么组件<template> <div id="app"> <h2>我是App组件</h2> <router-link to="/Home" tag="but原创 2020-06-29 17:00:13 · 165 阅读 · 0 评论 -
路由映射配置和呈现出来
路由映射配置和呈现出来使用vue-router的步骤:第一步:创建路由组件第二步:配置路由映射:组件和路由映射关系第三步:使用路由:通过和路由的默认路径默认情况下,进入网站首页我们希望渲染首页的内容。但是现实中默认没有显示首页组件,必须让用户点击才可以如何让路径默认跳到首页,并且渲染首页组件呢?只需要多配置一个映射就可以了const routes=[ { //redirect重定向 path:'/', redirect:'/home' },配置解析:原创 2020-06-29 16:27:57 · 400 阅读 · 0 评论 -
vue-router-安装和配置方式
vue-router-安装和配置方式目前前端流行的三大框架,都有自己的路由实现:1.Angular的ngRouter2.React的ReactRouter3.Vue的vue-routervue-routervue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。可以访问其官方网站对其进行学习:https://router.vuejs.org/zh/安装和使用vue-router直接使用npm来安装路由即可步骤一:安装vue-routern原创 2020-06-29 12:38:42 · 333 阅读 · 0 评论 -
URL的hash和HTML5的history
URL的hash和HTML5的historyURL的hsahURL的hash也就是锚点(#),本质上是改变window.location的href属性可以通过直接赋值location.hash来改变href,但是页面不发生刷新HTML5的history模式:pushState类似于一个栈结构,先进后出的原理,把push进去的值放在一个栈里面,可以调用返回的方法,就相当于弹栈和入栈pushState也可以改变URL但是页面不发生刷新HTML5的history模式:replaceStat原创 2020-06-29 12:10:33 · 479 阅读 · 0 评论 -
什么是路由和其中映射关系
什么是路由和其中映射关系什么是路由?说起路由想到了什么?路由是一个网络工程里面的术语路由(routing )就是通过互联的网络把信息从源地址传输到目的地址的活动。 —维基百科路由器提供了两种机制:路由和转送路由是决定数据包从来源到目的地的路径转送将输入端的数据转移到合适的输出端路由有一个非常重要的概念叫路由表:路由表本质上就是一个映射表,决定了数据包的指向一个面试问题:什么是前端渲染?什么是后端渲染?什么是前后端分离?什么是前端路由?什么是后端路由?后端渲染:jsp/phpj原创 2020-06-28 21:29:54 · 1614 阅读 · 0 评论