vue-router路由(二)

news2024/11/24 13:44:21

​🌈个人主页:前端青山
🔥系列专栏:Vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来vue篇专栏内容:vue-router路由(二)

目录

1. Vue-Router 的懒加载如何实现

2. 路由的hash和history模式的区别

1. hash模式

2. history模式

3. 两种模式对比

3. 如何获取页面的hash变化

4. $route 和$router 的区别

5. 如何定义动态路由?如何获取传过来的动态参数?

6. Vue-router 路由钩子在生命周期的体现

7. Vue-router跳转和location.href有什么区别

8. params和query的区别

9. Vue-router 导航守卫有哪些

10. 对前端路由的理解

1. Vue-Router 的懒加载如何实现

非懒加载:

import List from '@/components/list.vue'
const router = new VueRouter({
  routes: [
    { path: '/list', component: List }
  ]
})

(1)方案一(常用):使用箭头函数+import动态加载

const List = () => import('@/components/list.vue')
const router = new VueRouter({
  routes: [
    { path: '/list', component: List }
  ]
})

(2)方案二:使用箭头函数+require动态加载

const router = new Router({
  routes: [
   {
     path: '/list',
     component: resolve => require(['@/components/list'], resolve)
   }
  ]
})

(3)方案三:使用webpack的require.ensure技术,也可以实现按需加载。 这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。

// r就是resolve
const List = r => require.ensure([], () => r(require('@/components/list')), 'list');
// 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载 
const router = new Router({
  routes: [
  {
    path: '/list',
    component: List,
    name: 'list'
  }
 ]
}))

2. 路由的hash和history模式的区别

Vue-Router有两种模式:hash模式history模式。默认的路由模式是hash模式。

1. hash模式

简介: hash模式是开发中默认的模式,它的URL带着一个#,例如:www.abc.com/#/vue,它的hash值就是#/vue

特点:hash值会出现在URL里面,但是不会出现在HTTP请求中,对后端完全没有影响。所以改变hash值,不会重新加载页面。这种模式的浏览器支持度很好,低版本的IE浏览器也支持这种模式。hash路由被称为是前端路由,已经成为SPA(单页面应用)的标配。

原理: hash模式的主要原理就是onhashchange()事件

window.onhashchange = function(event){
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
}

使用onhashchange()事件的好处就是,在页面的hash值发生变化时,无需向后端发起请求,window就可以监听事件的改变,并按规则加载相应的代码。除此之外,hash值变化对应的URL都会被浏览器记录下来,这样浏览器就能实现页面的前进和后退。虽然是没有请求后端服务器,但是页面的hash值和对应的URL关联起来了。

2. history模式

简介: history模式的URL中没有#,它使用的是传统的路由分发模式,即用户在输入一个URL时,服务器会接收这个请求,并解析这个URL,然后做出相应的逻辑处理。 特点: 当使用history模式时,URL就像这样:abc.com/user/id。相比hash模式更加好看。但是,history模式需要后台配置支持。如果后台没有正确配置,访问时会返回404。 API: history api可以分为两大部分,切换历史状态和修改历史状态:

  • 修改历史状态:包括了 HTML5 History Interface 中新增的 pushState()replaceState() 方法,这两个方法应用于浏览器的历史记录栈,提供了对历史记录进行修改的功能。只是当他们进行修改时,虽然修改了url,但浏览器不会立即向后端发送请求。如果要做到改变url但又不刷新页面的效果,就需要前端用上这两个API。

  • 切换历史状态: 包括forward()back()go()三个方法,对应浏览器的前进,后退,跳转操作。

虽然history模式丢弃了丑陋的#。但是,它也有自己的缺点,就是在刷新页面的时候,如果没有相应的路由或资源,就会刷出404来。

如果想要切换到history模式,就要进行以下配置(后端也要进行配置):

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})
3. 两种模式对比

调用 history.pushState() 相比于直接修改 hash,存在以下优势:

  • pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL;而 hash 只可修改 # 后面的部分,因此只能设置与当前 URL 同文档的 URL;

  • pushState() 设置的新 URL 可以与当前 URL 一模一样,这样也会把记录添加到栈中;而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中;

  • pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中;而 hash 只可添加短字符串;

  • pushState() 可额外设置 title 属性供后续使用。

  • hash模式下,仅hash符号之前的url会被包含在请求中,后端如果没有做到对路由的全覆盖,也不会返回404错误;history模式下,前端的url必须和实际向后端发起请求的url一致,如果没有对用的路由处理,将返回404错误。

hash模式和history模式都有各自的优势和缺陷,还是要根据实际情况选择性的使用。

3. 如何获取页面的hash变化

(1)监听$route的变化

// 监听,当路由发生变化的时候执行
watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }
},

(2)window.location.hash读取#值 window.location.hash 的值可读可写,读取来判断状态是否改变,写入时可以在不重载网页的前提下,添加一条历史访问记录。

4. $route 和$router 的区别

  • $route 是“路由信息对象”,包括 path,params,hash,query,fullPath,matched,name 等路由信息参数

  • $router 是“路由实例”对象包括了路由的跳转方法,钩子函数等。

5. 如何定义动态路由?如何获取传过来的动态参数?

(1)param方式

  • 配置路由格式:/router/:id

  • 传递的方式:在path后面跟上对应的值

  • 传递后形成的路径:/router/123

1)路由定义

//在APP.vue中
<router-link :to="'/user/'+userId" replace>用户</router-link>    
​
//在index.js
{
   path: '/user/:userid',
   component: User,
},

2)路由跳转

// 方法1:
<router-link :to="{ name: 'users', params: { uname: wade }}">按钮</router-link
​
// 方法2:
this.$router.push({name:'users',params:{uname:wade}})
​
// 方法3:
this.$router.push('/user/' + wade)

3)参数获取 通过 $route.params.userid 获取传递的值

(2)query方式

  • 配置路由格式:/router,也就是普通配置

  • 传递的方式:对象中使用query的key作为传递方式

  • 传递后形成的路径:/route?id=123

1)路由定义

//方式1:直接在router-link 标签上以对象的形式
<router-link :to="{path:'/profile',query:{name:'why',age:28,height:188}}">档案</router-link>
​
// 方式2:写成按钮以点击事件形式
<button @click='profileClick'>我的</button>    
​
profileClick(){
  this.$router.push({
    path: "/profile",
    query: {
        name: "kobi",
        age: "28",
        height: 198
    }
  });
}

2)跳转方法

// 方法1:
<router-link :to="{ name: 'users', query: { uname: james }}">按钮</router-link>
​
// 方法2:
this.$router.push({ name: 'users', query:{ uname:james }})
​
// 方法3:
<router-link :to="{ path: '/user', query: { uname:james }}">按钮</router-link>
​
// 方法4:
this.$router.push({ path: '/user', query:{ uname:james }})
​
// 方法5:
this.$router.push('/user?uname=' + jsmes)

3)获取参数

通过$route.query 获取传递的值

6. Vue-router 路由钩子在生命周期的体现

一、Vue-Router导航守卫

有的时候,需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录。 为此有很多种方法可以植入路由的导航过程:全局的,单个路由独享的,或者组件级的

  1. 全局路由钩子

vue-router全局有三个路由钩子;

  • router.beforeEach 全局前置守卫 进入路由之前

  • router.beforeResolve 全局解析守卫(2.5.0+)在 beforeRouteEnter 调用之后调用

  • router.afterEach 全局后置钩子 进入路由之后

具体使用∶

  • beforeEach(判断是否登录了,没登录就跳转到登录页)

router.beforeEach((to, from, next) => {  
    let ifInfo = Vue.prototype.$common.getSession('userData');  // 判断是否登录的存储信息
    if (!ifInfo) { 
        // sessionStorage里没有储存user信息    
        if (to.path == '/') { 
            //如果是登录页面路径,就直接next()      
            next();    
        } else { 
            //不然就跳转到登录      
            Message.warning("请重新登录!");     
            window.location.href = Vue.prototype.$loginUrl;    
        }  
    } else {    
        return next();  
    }
})
  • afterEach (跳转之后滚动条回到顶部)

router.afterEach((to, from) => {  
    // 跳转之后滚动条回到顶部  
    window.scrollTo(0,0);
});
  1. 单个路由独享钩子

beforeEnter 如果不想全局配置守卫的话,可以为某些路由单独配置守卫,有三个参数∶ to、from、next

export default [    
    {        
        path: '/',        
        name: 'login',        
        component: login,        
        beforeEnter: (to, from, next) => {          
            console.log('即将进入登录页面')          
            next()        
        }    
    }
]
  1. 组件内钩子

beforeRouteUpdate、beforeRouteEnter、beforeRouteLeave

这三个钩子都有三个参数∶to、from、next

  • beforeRouteEnter∶ 进入组件前触发

  • beforeRouteUpdate∶ 当前地址改变并且改组件被复用时触发,举例来说,带有动态参数的路径foo/∶id,在 /foo/1 和 /foo/2 之间跳转的时候,由于会渲染同样的foa组件,这个钩子在这种情况下就会被调用

  • beforeRouteLeave∶ 离开组件被调用

注意点,beforeRouteEnter组件内还访问不到this,因为该守卫执行前组件实例还没有被创建,需要传一个回调给 next来访问,例如:

beforeRouteEnter(to, from, next) {      
    next(target => {        
        if (from.path == '/classProcess') {          
            target.isFromProcess = true        
        }      
    })    
}

二、Vue路由钩子在生命周期函数的体现

  1. 完整的路由导航解析流程(不包括其他生命周期)

  • 触发进入其他路由。

  • 调用要离开路由的组件守卫beforeRouteLeave

  • 调用局前置守卫∶ beforeEach

  • 在重用的组件里调用 beforeRouteUpdate

  • 调用路由独享守卫 beforeEnter。

  • 解析异步路由组件。

  • 在将要进入的路由组件中调用 beforeRouteEnter

  • 调用全局解析守卫 beforeResolve

  • 导航被确认。

  • 调用全局后置钩子的 afterEach 钩子。

  • 触发DOM更新(mounted)。

  • 执行beforeRouteEnter 守卫中传给 next 的回调函数

  1. 触发钩子的完整顺序

路由导航、keep-alive、和组件生命周期钩子结合起来的,触发顺序,假设是从a组件离开,第一次进入b组件∶

  • beforeRouteLeave:路由组件的组件离开路由前钩子,可取消路由离开。

  • beforeEach:路由全局前置守卫,可用于登录验证、全局路由loading等。

  • beforeEnter:路由独享守卫

  • beforeRouteEnter:路由组件的组件进入路由前钩子。

  • beforeResolve:路由全局解析守卫

  • afterEach:路由全局后置钩子

  • beforeCreate:组件生命周期,不能访问tAis。

  • created;组件生命周期,可以访问tAis,不能访问dom。

  • beforeMount:组件生命周期

  • deactivated:离开缓存组件a,或者触发a的beforeDestroy和destroyed组件销毁钩子。

  • mounted:访问/操作dom。

  • activated:进入缓存组件,进入a的嵌套子组件(如果有的话)。

  • 执行beforeRouteEnter回调函数next。

  1. 导航行为被触发到导航完成的整个过程

  • 导航行为被触发,此时导航未被确认。

  • 在失活的组件里调用离开守卫 beforeRouteLeave。

  • 调用全局的 beforeEach守卫。

  • 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。

  • 在路由配置里调用 beforeEnteY。

  • 解析异步路由组件(如果有)。

  • 在被激活的组件里调用 beforeRouteEnter。

  • 调用全局的 beforeResolve 守卫(2.5+),标示解析阶段完成。

  • 导航被确认。

  • 调用全局的 afterEach 钩子。

  • 非重用组件,开始组件实例的生命周期:beforeCreate&created、beforeMount&mounted

  • 触发 DOM 更新。

  • 用创建好的实例调用 beforeRouteEnter守卫中传给 next 的回调函数。

  • 导航完成

7. Vue-router跳转和location.href有什么区别

  • 使用 location.href= /url来跳转,简单方便,但是刷新了页面;

  • 使用 history.pushState( /url ) ,无刷新页面,静态跳转;

  • 引进 router ,然后使用 router.push( /url ) 来跳转,使用了 diff 算法,实现了按需加载,减少了 dom 的消耗。其实使用 router 跳转和使用 history.pushState() 没什么差别的,因为vue-router就是用了 history.pushState() ,尤其是在history模式下。

8. params和query的区别

用法:query要用path来引入,params要用name来引入,接收参数都是类似的,分别是 this.$route.query.namethis.$route.params.name

url地址显示:query更加类似于ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示

注意:query刷新不会丢失query里面的数据 params刷新会丢失 params里面的数据。

9. Vue-router 导航守卫有哪些

  • 全局前置/钩子:beforeEach、beforeResolve、afterEach

  • 路由独享的守卫:beforeEnter

  • 组件内的守卫:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

10. 对前端路由的理解

在前端技术早期,一个 url 对应一个页面,如果要从 A 页面切换到 B 页面,那么必然伴随着页面的刷新。这个体验并不好,不过在最初也是无奈之举——用户只有在刷新页面的情况下,才可以重新去请求数据。

后来,改变发生了——Ajax 出现了,它允许人们在不刷新页面的情况下发起请求;与之共生的,还有“不刷新页面即可更新页面内容”这种需求。在这样的背景下,出现了 SPA(单页面应用)。

SPA极大地提升了用户体验,它允许页面在不刷新的情况下更新页面内容,使内容的切换更加流畅。但是在 SPA 诞生之初,人们并没有考虑到“定位”这个问题——在内容切换前后,页面的 URL 都是一样的,这就带来了两个问题:

  • SPA 其实并不知道当前的页面“进展到了哪一步”。可能在一个站点下经过了反复的“前进”才终于唤出了某一块内容,但是此时只要刷新一下页面,一切就会被清零,必须重复之前的操作、才可以重新对内容进行定位——SPA 并不会“记住”你的操作。

  • 由于有且仅有一个 URL 给页面做映射,这对 SEO 也不够友好,搜索引擎无法收集全面的信息

为了解决这个问题,前端路由出现了。

前端路由可以帮助我们在仅有一个页面的情况下,“记住”用户当前走到了哪一步——为 SPA 中的各个视图匹配一个唯一标识。这意味着用户前进、后退触发的新内容,都会映射到不同的 URL 上去。此时即便他刷新页面,因为当前的 URL 可以标识出他所处的位置,因此内容也不会丢失。

那么如何实现这个目的呢?首先要解决两个问题:

  • 当用户刷新页面时,浏览器会默认根据当前 URL 对资源进行重新定位(发送请求)。这个动作对 SPA 是不必要的,因为我们的 SPA 作为单页面,无论如何也只会有一个资源与之对应。此时若走正常的请求-刷新流程,反而会使用户的前进后退操作无法被记录。

  • 单页面应用对服务端来说,就是一个URL、一套资源,那么如何做到用“不同的URL”来映射不同的视图内容呢?

从这两个问题来看,服务端已经完全救不了这个场景了。所以要靠咱们前端自力更生,不然怎么叫“前端路由”呢?作为前端,可以提供这样的解决思路:

  • 拦截用户的刷新操作,避免服务端盲目响应、返回不符合预期的资源内容。把刷新这个动作完全放到前端逻辑里消化掉。

  • 感知 URL 的变化。这里不是说要改造 URL、凭空制造出 N 个 URL 来。而是说 URL 还是那个 URL,只不过我们可以给它做一些微小的处理——这些处理并不会影响 URL 本身的性质,不会影响服务器对它的识别,只有我们前端感知的到。一旦我们感知到了,我们就根据这些变化、用 JS 去给它生成不同的内容。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1217571.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

打开文件 和 文件系统的文件产生关联

补充1&#xff1a;硬件级别磁盘和内存之间数据交互的基本单位 OS的内存管理 内存的本质是对数据临时存/取&#xff0c;把内存看成很大的缓冲区 物理内存和磁盘交互的单位是4KB&#xff0c;磁盘中未被打开的文件数据块也是4KB&#xff0c;所以磁盘中页帧也是4KB&#xff0c;内存…

JMeter之HTTP压测详解

一、创建线程组 右击-->添加-->Threads(Users)-->线程组 下面对比较重要的几个参数&#xff0c;讲解下&#xff1a; 名称&#xff1a; 就是给你这个线程组起名字。 线程数&#xff1a;指压力测试时候模拟几个用户测试接口。 Ramp-Up&#xff1a;这里指几秒运行完上…

Windows环境VSCode配置OpenCV-项目配置(二)

修改c_cpp_properties.json {"configurations": [{"name": "windows-gcc-x64","includePath": ["${workspaceFolder}/**","D:/mingw64/mingw64/include","D:/openCV_win/build/install/include","…

【linux】htop 命令行工具使用

htop是一个跨平台的交互式流程查看器。 htop允许垂直和水平滚动进程列表&#xff0c;以查看它们的完整命令行和相关信息&#xff0c;如内存和CPU消耗。还显示了系统范围的信息&#xff0c;如负载平均值或交换使用情况。 显示的信息可以通过图形设置进行配置&#xff0c;并且可…

Python与ArcGIS系列(八)通过python执行地理处理工具

目录 0 简述1 脚本执行地理处理工具2 在地理处理工具间建立联系0 简述 arcgis包含数百种可以通过python脚本执行的地理处理工具,这样就通过python可以处理复杂的工作和批处理。本篇将介绍如何利用arcpy实现执行地理处理工具以及在地理处理工具间建立联系。 1 脚本执行地理处理…

python接口自动化-参数关联

前言 我们用自动化发帖之后&#xff0c;要想接着对这篇帖子操作&#xff0c;那就需要用参数关联了&#xff0c;发帖之后会有一个帖子的id&#xff0c;获取到这个id&#xff0c;继续操作传这个帖子id就可以了 &#xff08;博客园的登录机制已经变了&#xff0c;不能用账号和密…

C语言加密字符(ZZULIOJ1064:加密字符)

题目描述 从键盘输入一批字符&#xff0c;以结束&#xff0c;按要求加密并输出。 输入&#xff1a;从键盘输入一批字符&#xff0c;占一行&#xff0c;以结束。 输出&#xff1a;输出占一行 加密规则: 1&#xff09;所有字母均转换为小写。 2&#xff09;若是字母a到y&#xff…

最新版仿东郊到家小程序源码 上门服务小程序源码

最新版仿东郊到家小程序源码 上门服务小程序源码 1、数据概况&#xff08;新增业务城市用户投票功能&#xff0c;更加直观的查看业务城市的关注度、人气和影响力,促进业务开展&#xff09; 2、数据概况 &#xff08;增加可视化数据大盘&#xff0c;代理商端可查看自己下面的技…

虚幻C++ day5

角色状态的常见机制 创建角色状态设置到UI上 在MainPlayer.h中新建血量&#xff0c;最大血量&#xff0c;耐力&#xff0c;最大耐力&#xff0c;金币变量&#xff0c;作为角色的状态 //主角状态UPROPERTY(EditDefaultsOnly, BlueprintReadOnly, Category "Playe Stats&…

【Gitpod】云部署Stable Diffusion并且可以本地访问

文章目录 前言项目部署 项目启动参考文献 前言 本文介绍如何使用 Gitpod 部署 Stable Diffusion web UI。Gitpod 是一个基于云的开发环境&#xff0c;通过与 GitHub 集成&#xff0c;可以在浏览器中轻松进行代码开发和部署&#xff1b;Stable Diffusion 是 GitHub 上面的开源 …

2023 OPPO开发者大会正式开幕,ColorOS 14亮相,手机流畅进入「最后一公里」比拼

2023年11月16日,OPPO开发者大会正式开幕,万众期待的ColorOS 14正式发布,并且已经确定,将由OPPO Reno11系列首发。 本次的ColorOS 14将OPPO之前布局的AndesGPT、潘塔纳尔自研系统、超算平台三大技术全面整合,带来全新智慧新体验。智慧互融,化繁为简;软硬芯协同,设备流畅度全面进…

SDL音视频渲染

01-SDL简介 官网&#xff1a;https://www.libsdl.org/ 文档&#xff1a;http://wiki.libsdl.org/Introduction SDL&#xff08;Simple DirectMedia Layer&#xff09;是一套开放源代码的跨平台多媒体开发库&#xff0c;使用C语言写成。SDL提供了数种控制图像、声音、输出入的函…

数字化转型的“支点”是什么?

​当前&#xff0c;数字化转型在推动各行各业降本增效的过程中扮演着越来越重要的角色&#xff0c;数字化转型不仅可以提高企业的生产效率和降低企业生产经营成本&#xff0c;也成为了推动经济发展的新引擎。对于企业而言&#xff0c;想要成功推动企业数字化转型&#xff0c;不…

【路径穿越】vulfocus/apache-cve_2021_41773

1.1漏洞描述 漏洞编号cve_2021_41773漏洞类型路径穿越漏洞等级高危漏洞环境vulfocus攻击方式 1.2漏洞等级 高危 1.3影响版本 Apache HTTP Server 2.4.49、2.4.50 1.4漏洞复现 1.4.1.基础环境 靶场VULFOCUS工具BurpSuite 1.4.2.前提 1.5深度利用 1.5.1漏洞点 利用网上爆出…

干货分享!各大跨境电商平台入驻指南及跨境电商实用工具推荐!

当跨境电商成为一个所有人都耳熟能详的名词&#xff0c;各类跨境电商平台和软件都一拥而上&#xff0c;跨境电商平台和工具千千万&#xff0c;那么很多人就在问了&#xff0c;该怎么入驻这些电商平台呢&#xff1f;又该选择什么样的跨境电商软件呢&#xff1f;今天这期干货分享…

event事件分发器||静态类型转换

由于类型不一样在event事件分发器中要进行静态类型转换&#xff0c;将基类转换为派生类进行处理 对event事件分发器拦截后最后要将其他函数交给父类处理&#xff0c;否则不会运行

Confluence的安装部署

先介绍一下confluence Confluence是一个专业的企业知识管理与协同软件&#xff0c;也可以用于构建企业wiki。使用简单&#xff0c;但它强大的编辑和站点管理特征能够帮助团队成员之间共享信息、文档协作、集体讨论&#xff0c;信息推送。 confluence是Atlassian公司的&#x…

Mysql分组查询每组最新的一条数据

在工作中遇到一个问题&#xff0c;需要查出每个公司最新的那条数据。 所以需根据公司进行分组&#xff1a; 未进行分组时&#xff1a; select a.id, b.name companyName, result_asset ,result_liability ,result_net_asset, a.create_time ,a.is_deleted from bus_proper…

【Git操作】Author identity unknown Please tell me who you are

前言 这错误主要是在上传到Gitee的时候&#xff0c;我们没有设置用户名和和邮箱&#xff0c;原因有很多&#xff0c;更换设备&#xff0c;或者第一次提交的时候都会遇到这个问题&#xff0c;我们只需要在终端简单的输入两行指令就可以解决。 git config --global user.email &q…

都有哪些大厂有自己的Web组件库?

有TDesign、ArcoDesign、AntDesign、随着Materialdesign等优秀web组件库的发布&#xff0c;设计师可能会觉得大厂之间的web组件库差别不大。其实大厂的产品线很多&#xff0c;业务复杂。设计系统是对以往项目经验的深刻沉淀&#xff0c;可以支撑业务逻辑&#xff0c;保证设计系…