경로에서 # 기호를 제거하는 Vue 메소드

vue-router에는 해시 모드와 히스토리 모드의 두 가지 모드가 있고 #이 있는 모드가 해시 모드라는 것은 누구나 알고 있습니다. 다음으로 Vue에서 경로에 있는 # 기호를 제거하는 솔루션을 가져왔습니다. 관심 있는 친구들은 개발 과정에서 경로에 /#/ 기호가 있는데 제거할 수 없다는 것을 발견했습니다. 매우 어렵습니다.

우리 모두 알고 있듯이 vue-router에는 해시 모드와 히스토리 모드의 두 가지 모드가 있습니다.

#이 있는 것이 해시 모드입니다.

라우터의 모드를 기록으로 설정하면 됩니다

그러다가 인터페이스를 새로 고치자마자 404로 변경되는 문제가 발생합니다! ! ! !

온라인으로 검색한 후 백엔드 환경을 구성해야 합니다.

여기에는 nginx 구성만 나열되어 있습니다. 다른 구성을 보려면 여기를 클릭하여 공식 웹사이트로 이동하세요.

먼저 config/index.js를 구성하세요.

assetsPublicPath를 루트 디렉터리로 수정하세요

module.exports = {
  build: {
      env: require('./prod.env'),
      index: path.resolve(__dirname, '../dist/index.html'),
      assetsRoot: path.resolve(__dirname, '../dist'),
      assetsSubDirectory: 'static',
      assetsPublicPath: '/',   // hash 模式会默认的在此处 添加为 assetsPublicPath: './'
      productionSourceMap: true,
      ...
    }
}

구성하세요. nignx

server {
    listen 0.0.0.0:12345;
    location / {
        root /home/我的应用跟目录;
        try_files $uri $uri/ /index.html =404;  // 这个是重点
    }
    error_page 404 /index.html
}

Url에 더 이상 #이 없습니다. 정말 완벽하네요

위 내용은 이 기사의 전체 내용입니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트에 주목하세요. !

관련 권장 사항:

Vue2.0 다중 탭 전환 구성 요소 캡슐화 소개

ES6 클래스를 사용하여 Vue를 모방하여 양방향 바인딩 예제 작성

cropper.js 기반 온라인 이미지를 구현하기 위해 Vue를 캡슐화합니다. 자르기 구성 요소 기능

위 내용은 경로에서 # 기호를 제거하는 Vue 메소드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!