«

vue3路由hash与History怎么设置

时间:2024-7-3 13:29     作者:韩俊     分类: Javascript


本篇内容介绍了“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>

    标签: javascript vue

    热门推荐