文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue3路由hash与History怎么设置

2023-07-06 05:17

关注

本篇内容介绍了“vue3路由hash与History怎么设置”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

vue3路由hash与History的设置

1、history 关键字:createWebHistory

import { createRouter, createWebHistory } from 'vue-router'const routes = [ {  path: '/userinfo',  name: 'UserInfo',  component: () => import('../views/UserInfo.vue')}]const router = createRouter({  history: createWebHistory(process.env.BASE_URL),  routes})export default router

history模式直接指向history对象,它表示当前窗口的浏览历史,history对象保存了当前窗口访问过的所有页面网址。URL中没有#,它使用的是传统的路由分发模式,即用户在输入一个URL时,服务器会接收这个请求,并解析这个URL,然后做出相应的逻辑处理。

特点:

当使用history模式时,URL就像这样:hhh.com/user/id。相比hash模式更加好看。

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

history api可以分为两大部分,切换历史状态 和 修改历史状态:

修改历史状态:

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

切换历史状态:

包括forward()、back()、go()三个方法,对应浏览器的前进,后退,跳转操作。

配置:

想要设置成history模式,就要进行以下的配置(后端也要进行配置):

const router = new VueRouter({  mode: 'history',  routes: [...]})

2、hash 关键字:createWebHashHistory

import { createRouter, createWebHashHistory } from 'vue-router'const routes = [{  path: '/userinfo',  name: 'UserInfo',  component: () => import('../views/UserInfo.vue')}]const router = createRouter({  history: createWebHashHistory(),  routes})export default router

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关联起来了。

获取页面hash变化的方法:

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

vue2和vue3中路由的区别和写法

Vue 2 和 Vue 3 中路由的主要区别在于使用的路由库不同。在 Vue 2 中,通常使用 Vue Router 作为路由库;而在 Vue 3 中,Vue Router 仍然是官方推荐的路由库,但也可以选择使用新的路由库 - Vue Router Next。

下面分别介绍在 Vue 2 和 Vue 3 中使用 Vue Router 的路由写法:

vue3中使用 Vue Router

安装 Vue Router:在终端中执行以下命令进行安装:

npm install vue-router

引入 Vue Router 并配置路由:在 main.js 中引入 Vue Router,并配置路由规则和组件对应关系。

示例代码如下:

import Vue from 'vue'import VueRouter from 'vue-router'import Home from './components/Home.vue'import About from './components/About.vue' Vue.use(VueRouter) const routes = [  { path: '/', component: Home },  { path: '/about', component: About }] const router = newVueRouter({  routes // 等价于 routes: routes}) newVue({  el: '#app',  router,  render: h =>h(App)})

在模板中使用路由:在模板中使用 router-link 组件来实现路由跳转,router-view 组件用于显示对应的组件内容。

示例代码如下:

<template>    <div id="app">        <nav>            <router-link to="/">Home</router-link>            <router-link to="/about">About</router-link>        </nav>        <router-view></router-view>    </div></template>

vue3中使用 Vue Router Next

安装 Vue Router Next:在终端中执行以下命令进行安装:

npm install vue-router@4

引入 Vue Router Next 并配置路由:在 main.js 中引入 Vue Router Next,并配置路由规则和组件对应关系。

示例代码如下:

import { createApp } from 'vue'import { createRouter, createWebHistory } from 'vue-router'import Home from './components/Home.vue'import About from './components/About.vue'import App from './App.vue'const routes = [  { path: '/', component: Home },  { path: '/about', component: About }] const router = createRouter({  history: createWebHistory(),  routes}) const app = createApp(App)app.use(router)app.mount('#app')

在模板中使用路由:在模板中使用 router-link 组件来实现路由跳转,router-view 组件用于显示对应的组件内容。示例代码如下:

<template>    <div id="app">        <nav>            <router-link to="/">Home</router-link>            <router-link to="/about">About</router-link>        </nav>        <router-view></router-view>    </div></template>

“vue3路由hash与History怎么设置”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯