Vue.js - url에서 해시방 #!을 제거하는 방법?

Vue.js - url에서 해시방 #!을 제거하는 방법?

해시방 제거 방법#! urlwhere?

vue 라우터 설명서(http://vuejs.github.io/vue-router/en/options.html )에서 해시방을 사용하지 않도록 설정하는 옵션을 찾았지만 이 옵션은 제거됨#!그리고 그냥.#

url을 정리할 방법은 없을까?

예:

아님:#!/home

하지만:/home

고마워!

사실 당신은 단지 설정하기를 원했을 것이다.mode로'history'.

const router = new VueRouter({
  mode: 'history'
})

그러나 서버가 이러한 링크를 처리하도록 구성되었는지 확인하십시오.https://router.vuejs.org/guide/essentials/history-mode.html

vue.js 2의 경우 다음을 사용하십시오.

const router = new VueRouter({
 mode: 'history'
})

해시는 기본 vue-roouter 모드 설정이며, 해시를 사용하면 애플리케이션이 URL을 제공하기 위해 서버를 연결할 필요가 없기 때문에 설정된다.변경하려면 서버를 구성하고 HTML5 History API 모드로 설정하십시오.

서버 구성의 경우 Apache, Nginx 및 Node.js 서버를 설정하는 데 도움이 되는 링크:

https://router.vuejs.org/guide/essentials/history-mode.html

그런 다음 vue 라우터 모드가 다음과 같이 설정되어 있는지 확인하십시오.

vue-result 버전 2.x

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

확실히 하기 위해 선택할 수 있는 모든 Vue-Router 모드:"hash" | "역사" | "abstract".

Vuejs 2.5 & vue-router 3.0의 경우 위의 어떤 것도 나에게 효과가 없었지만, 조금만 놀고 나면 다음과 같은 것들이 효과가 있는 것 같다.

export default new Router({
  mode: 'history',
  hash: false,
  routes: [
  ...
    ,
    { path: '*', redirect: '/' }, // catch all use case
  ],
})

캐치 올 경로도 추가해야 한다는 점에 유의하십시오.

Vue 3의 경우 다음을 변경하십시오.

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

다음으로:

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

출처: https://next.router.vuejs.org/guide/essentials/history-mode.html#hash-mode

문서를 인용하는 것.

vue-루터의 기본 모드는 해시 모드 - URL 해시를 사용하여 전체 URL을 시뮬레이션하여 URL이 변경될 때 페이지가 다시 로드되지 않도록 한다.

해시를 제거하기 위해 history.pushState API를 활용하여 페이지 재로드 없이 URL 탐색을 수행하는 라우터의 history 모드를 사용할 수 있다.

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

기록 모드를 사용할 때 URL은 "정상"으로 표시된다(예: http://oursite.com/user/id).예쁘다!

하지만 여기에 문제가 있다: 우리의 앱은 적절한 서버 구성이 없는 단일 페이지 클라이언트 측 앱이기 때문에, 사용자들이 브라우저에서 http://oursite.com/user/id에 직접 접속하면 404 오류가 발생할 것이다.이제 그건 못생겼어.

걱정하지 마십시오.이 문제를 해결하기 위해, 당신은 당신의 서버에 간단한 캐치 올 폴백 루트를 추가하기만 하면 된다.URL이 정적 자산과 일치하지 않으면 해당 URL은 앱이 상주하는 동일한 index.html 페이지를 제공해야 한다.아름다워, 다시!

window.router = new VueRouter({
   hashbang: false,
   //abstract: true,
  history: true,
    mode: 'html5',
  linkActiveClass: 'active',
  transitionOnLoad: true,
  root: '/'
});

서버가 제대로 구성되어 있다. 아파치에서는 URL을 다시 작성해야 한다.

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

그vue-router사용하다hash-mode간단히 말해서 그것은 당신이 보통 이와 같은 어처구니없는 태그로부터 기대하는 것이다.

<a href="#some_section">link<a>

해시를 사라지게 하려면

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
] // Routes Array
const router = new VueRouter({
  mode: 'history', // Add this line
  routes
})

Warning: 서버가 제대로 구성되지 않았거나 클라이언트측 SPA를 사용하는 경우404 Error만약 그들이 접근하려고 한다면https://website.com/posts/3브라우저에서 직접.Vue 라우터 문서

위의 몇 가지 좋은 설명은 "createWebHashHistory"를 대체하는 "createWebHashHistory"가 라우터/index.js 파일의 두 곳에 존재한다는 것을 깨닫기 전까지 나를 토끼굴로 이끈다.파일 끝에 있는 상수의 정의에 한 번 더 포함시키고 파일 상단에 있는 vue-router에서 가져오기를 다시 한 번 더.

라우터/index.js 파일 끝에 검색됨

  const router = createRouter({
    mode: 'history',
    history: createWebHistory(),
    // history: createWebHashHistory(),
    routes
  })

라우터/index.js 파일의 첫 번째 줄

import { createRouter, createWebHistory } from 'vue-router'
// import { createRouter, createWebHashHistory } from 'vue-router'

이제 그것은 하나의 매력처럼 작용한다. 나를 성공으로 이끄는 위의 모든 것에 감사한다!

다음과 같이 라우터에 모드 기록을 추가하십시오.

export default new Router({
  mode: 'history',
  routes: [
    {
     ...
    }
  ]
})

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

AWS 앰프를 사용하는 경우 서버 구성 방법에 대해 다음 문서를 확인하십시오.Vue 라우터의 기록 모드 및 AWS 증폭

src->router->index.js에서 파일 열기

이 파일 하단에서:

const router = new VueRouter({
  mode: "history",
  routes,
});

vue-루터의 기본 모드는 해시 모드 - URL 해시를 사용하여 전체 URL을 시뮬레이션하여 URL이 변경될 때 페이지가 다시 로드되지 않도록 한다.해시를 없애려면 라우터의 히스토리 모드를 사용하면 되는데, 이 모드는 라우터의 히스토리 모드를 활용하면 된다.history.pushState페이지 다시 로드 없이 URL 탐색을 수행하는 API:

import {routes} from './routes'; //import the routes from routes.js    

const router = new VueRouter({
    routes,
    mode: "history",
});

new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

routes.js.

import ComponentName from './ComponentName';

export const routes = [
   {
      path:'/your-path'
      component:ComponentName
   }
]

참조

createWebHashHistory를 router.js 파일에서 createWebHistory로 바꾸십시오.

참조URL: https://stackoverflow.com/questions/34623833/vue-js-how-to-remove-hashbang-from-url