Làm thế nào để loại bỏ hashbang khỏi url?

Làm thế nào để loại bỏ hashbang #!khỏi url?

Tôi tìm thấy tùy chọn để vô hiệu hóa hashbang trong tài liệu bộ định tuyến vue ( http://vuejs.github.io/vue-router/en/options.html ) nhưng tùy chọn này sẽ xóa #!và chỉ cần đặt#

Có cách nào để có url sạch không?

Thí dụ:

KHÔNG PHẢI: #!/home

NHƯNG: /home

Bạn sẽ thực sự chỉ muốn thiết lập modeđể 'history'.

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

Tuy nhiên, hãy chắc chắn rằng máy chủ của bạn được cấu hình để xử lý các liên kết này. https://router.vuejs.org/guide/essentials/history-mode.html

Đối với vue.js 2, hãy sử dụng như sau:

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

Hash là cài đặt chế độ bộ định tuyến vue mặc định, nó được đặt vì với hàm băm, ứng dụng không cần kết nối máy chủ để phục vụ url. Để thay đổi, bạn nên định cấu hình máy chủ của mình và đặt chế độ thành chế độ API Lịch sử HTML5.

Đối với cấu hình máy chủ, đây là liên kết giúp bạn thiết lập máy chủ Apache, Nginx và Node.js:

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

Sau đó, bạn nên đảm bảo rằng chế độ bộ định tuyến vue được đặt như sau:

vue-router phiên bản 2.x

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

Để rõ ràng, đây là tất cả các chế độ vue-router bạn có thể chọn: "băm" | "lịch sử" | "trừu tượng".

Đối với Vuejs 2.5 & vue-router 3.0, không có gì ở trên hoạt động với tôi, tuy nhiên sau khi chơi xung quanh một chút, những điều sau đây dường như hoạt động:

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

lưu ý rằng bạn cũng sẽ cần thêm đường dẫn bắt tất cả.

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

và máy chủ được cấu hình đúng cách Trong apache, bạn nên viết lại 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>

Trích dẫn các tài liệu.

Chế độ mặc định cho vue-router là chế độ băm - nó sử dụng hàm băm URL để mô phỏng một URL đầy đủ để trang sẽ không được tải lại khi URL thay đổi.

Để thoát khỏi hàm băm, chúng ta có thể sử dụng chế độ lịch sử của bộ định tuyến, sử dụng API history.pushState để đạt được điều hướng URL mà không cần tải lại trang:

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

Khi sử dụng chế độ lịch sử, URL sẽ trông "bình thường", ví dụ: http://oursite.com/user/id . Xinh đẹp!

Tuy nhiên, đây là một vấn đề: Vì ứng dụng của chúng tôi là ứng dụng phía máy khách, không có cấu hình máy chủ phù hợp, người dùng sẽ gặp lỗi 404 nếu họ truy cập http://oursite.com/user/id trực tiếp trong trình duyệt của họ. Bây giờ thì xấu xí.

Đừng lo lắng: Để khắc phục sự cố, tất cả những gì bạn cần làm là thêm một tuyến dự phòng bắt tất cả đơn giản vào máy chủ của bạn. Nếu URL không khớp với bất kỳ tài sản tĩnh nào, thì URL đó sẽ phục vụ cùng một trang index.html mà ứng dụng của bạn tồn tại. Đẹp, một lần nữa!

Việc vue-routersử dụng hash-mode, nói một cách đơn giản, đó là điều mà bạn thường mong đợi từ một thẻ đau như thế này.

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

Để làm cho hàm băm biến mất

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

Warning: Nếu bạn không có máy chủ được cấu hình đúng hoặc bạn đang sử dụng người dùng SPA phía máy khách có thể nhận được 404 Error nếu họ cố truy cập https://website.com/posts/3trực tiếp từ trình duyệt của họ. Vue Router Docs

Chế độ mặc định cho vue-router là chế độ băm - nó sử dụng hàm băm URL để mô phỏng một URL đầy đủ để trang sẽ không được tải lại khi URL thay đổi. Để thoát khỏi hàm băm, chúng ta có thể sử dụng chế độ lịch sử của bộ định tuyến, sử dụng history.pushStateAPI để đạt được điều hướng URL mà không cần tải lại trang:

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)
});

Rout.js

import ComponentName from './ComponentName';

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

Tài liệu tham khảo

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

Và nếu bạn đang sử dụng khuếch đại AWS, hãy kiểm tra bài viết này về cách định cấu hình máy chủ: Chế độ lịch sử của bộ định tuyến Vue và AWS Amplify