前端vue2、vue3去掉url路由“ # ”号——nginx配置(一)

简介: 前端vue2、vue3去掉url路由“ # ”号——nginx配置

⭐前言

大家好,我是yma16,本文分享关于vue2、vue3去掉url路由 # 号——nginx配置。

html的 hash模式

HTML的hash模式指的是URL中的锚点部分(#后面的内容)被用于在单个页面中显示不同的内容,而不是导航到不同的页面。例如:

https://example.com/#about

在这个示例中,#about部分是一个锚点,用于在页面上显示关于页面的内容,而不是导航到一个新的页面。

在使用hash模式时,可以使用JavaScript监听hashchange事件,以便在锚点改变时执行相应的操作。这种模式常用于单页面应用程序(SPA),其中所有页面内容都在同一个HTML页面中加载,而不是通过导航到新页面来加载。此外,hash模式还可以用于在不刷新整个页面的情况下更改URL,以便在浏览器历史记录中创建可回退的状态。

html的 history模式

HTML5中的History API允许使用JavaScript动态更新URL并在历史记录中保存状态,而不会刷新整个页面。这就是所谓的“history模式”。它使用HTML5的pushState和replaceState方法来添加或修改浏览器历史记录中的条目。

在history模式下,URL的路径部分会随着用户的操作而变化,但实际页面内容不会刷新,这使得Web应用程序更具交互性和可访问性。

如果浏览器支持History API,那么就可以使用history.pushState()和history.replaceState()方法来更新浏览器的URL路径,从而可以实现前端路由,而不用像传统的多页面应用一样每次都请求服务器获取新的HTML页面。

⭐vue2中router默认出现#号

路由配置默认出现 #

💖在vue2项目中去掉

关键配置

// 路由
    const router = new VueRouter({
        mode: 'history',
        routes
    })

router的配置

import { isEmpty } from '@/utils'
import store from '@/store'
const Login = () => import('@/components/user/Login')
const Register = () => import('@/components/user/Register')
const Onlinewebsocket = () => import('@/components/websocket/Onlinewebsocket')
const Home = () => import('@/components/Home')
const Bilicom = () => import('@/components/Bilicom')
const Mavoneditor = () => import('@/components/Mavoneditor')
const GrilShow = () => import('@/components/GrilShow')
const Csslearn = () => import('@/views/cssView/Csslearn')
const Article = () => import('@/views/article/Article')
const defaultRoutes = [
    {
        path: '/',
        name: 'Article',
        component: Article,
        hidden: true
    },
    {
        path: '/login',
        name: 'Login',
        component: Login,
        hidden: false
    },
    {
        path: '/register',
        name: 'Register',
        component: Register,
        hidden: false
    },
    {
        path: '/home',
        name: 'Home',
        component: Home,
        hidden: true
    },
    {
        path: '/onlinewebsocket',
        name: 'Onlinewebsocket',
        component: Onlinewebsocket,
        hidden: true
    },
    {
        path: '/mavoneditor',
        name: 'Mavoneditor',
        component: Mavoneditor,
        hidden: true
    },
    {
        path: '/gril',
        name: 'grilshow',
        component: GrilShow,
        hidden: true
    },
    {
        path: '/css',
        name: 'css',
        component: Csslearn,
        hidden: true
    }
]
const useRouter = (Vue, VueRouter) => {
    let routes = [
        ...defaultRoutes
    ]
    const originalPush = VueRouter.prototype.push
    VueRouter.prototype.push = function push (location) {
        return originalPush.call(this, location).catch((err) => err)
    }
    // 路由
    const router = new VueRouter({
        mode: 'history',
        routes
    })
    router.beforeEach(async (to, from, next) => {
        let yma16siteUserInfo = localStorage.getItem('yma16siteUserInfo')
            ? JSON.parse(localStorage.getItem('yma16siteUserInfo'))
            : {}
        let name = yma16siteUserInfo.username
        let pwd = yma16siteUserInfo.password
        let thirdUserInfo = yma16siteUserInfo.thirdUserInfo
        console.log('to', to)
        let hasToken = {
            name: name,
            password: pwd,
            thirdUserInfo: thirdUserInfo
        }
        console.log('localStorage', hasToken)
        if (hasToken.name && hasToken.password) {
            if (!isEmpty(store.state.user.userInfo)) {
                try {
                    // 空的 modules下的user
                    console.log('路由的登录认证')
                    // 用户自主登录
                    await store.dispatch('user/loginUserInfo', hasToken)
                    next()
                } catch (e) {
                    console.error(e, 'e')
                    if (to.name === 'Login' || to.path === '/login' || to.name === 'register' || to.path === '/Register') {
                    // 避免同名路由无限循环
                        console.log('next')
                        next()
                    } else {
                        console.log('login router')
                        return next({ name: 'Login' }) // 去登录
                    }
                }
            } else {
                console.log('next')
                next()
            }
        } else if (to.name === 'Login' || to.path === '/login' || to.name === 'Register' || to.path === '/register') {
            console.log('next login register')
            // 避免同名路由无限循环
            next()
        } else {
            console.log('login router')
            return next({ name: 'Login' }) // 去登录
        }
        return false
    })
    Vue.use(VueRouter)
    return router
}
export default useRouter

效果 url 没有 # 号

💖在vue3项目中去掉

import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})

createWebHashHistory变成createWebHistory

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes: [
    //...
  ],
})



前端vue2、vue3去掉url路由“ # ”号——nginx配置(二)https://developer.aliyun.com/article/1492690

目录
相关文章
|
30天前
|
前端开发 数据可视化 JavaScript
前端vite+vue3——可视化页面性能耗时指标(fmp、fp)
前端vite+vue3——可视化页面性能耗时指标(fmp、fp)
75 6
|
10天前
|
Windows
iis配置http重定向302转发get请求并去掉最后的斜杠/ iis重定向 iis去除url最后的斜杠 iis重定向链接斜杠(已解决)
iis配置http重定向302转发get请求并去掉最后的斜杠/ iis重定向 iis去除url最后的斜杠 iis重定向链接斜杠(已解决)
|
10天前
|
应用服务中间件 nginx Windows
nginx实现网站url带参跳转 POST请求GET请求跳转
nginx实现网站url带参跳转 POST请求GET请求跳转
|
28天前
|
前端开发 JavaScript 中间件
Vue3整合VxeTable,2024大厂前端面试
Vue3整合VxeTable,2024大厂前端面试
|
28天前
|
前端开发
vue2与vue3双向数据绑定的区别,前端面试自我介绍
vue2与vue3双向数据绑定的区别,前端面试自我介绍
|
30天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable修正加签与跳转的前端问题
ruoyi-nbcio-plus基于vue3的flowable修正加签与跳转的前端问题
22 0
|
30天前
|
移动开发 前端开发 JavaScript
ruoyi-nbcio-plus的Vue3前端一些插件使用介绍(二)
ruoyi-nbcio-plus的Vue3前端一些插件使用介绍(二)
21 2
|
30天前
|
移动开发 前端开发
ruoyi-nbcio-plus的Vue3前端一些插件使用介绍(一)
ruoyi-nbcio-plus的Vue3前端一些插件使用介绍(一)
22 1
|
30天前
|
移动开发 前端开发
ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题(二)
ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题(二)
28 1
|
30天前
|
移动开发 前端开发 JavaScript
ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题(一)
ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题(一)
25 2