VUE2和VUE3去掉地址栏中的#号

最新推荐文章于 2024-07-17 14:49:36 发布

原创最新推荐文章于 2024-07-17 14:49:36 发布 · 595 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文探讨了如何在Vue2和Vue3应用程序中移除URL中的井号(#)，提升用户体验。分别针对Vue2和Vue3的配置进行了解释。

Vue2

import Vue from 'vue'
import Router from 'vue-router'

// 定义路由
const routes = [
    {
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        name: '登陆',
        component: ()=>import('@/components/login/index.vue')
    }
]

const router = new Router({
    mode: 'history',
    routes
})


export default router

Vue3

import {
  useRoute,
  createRouter,
  createWebHistory,
} from "vue-router";

// 定义路由
const routes = [
    {
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        name: '登陆',
        component: ()=>import('@/components/login/index.vue')
    }
]

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;