วิธีลบ hashbang จาก url

วิธีลบ hashbang #!จาก url

ฉันพบตัวเลือกเพื่อปิดการใช้งาน hashbang ในเอกสารประกอบเราเตอร์ 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'
})

Hash เป็นการตั้งค่าโหมด vue-router ที่เป็นค่าเริ่มต้นเนื่องจากมีการแฮชแอปพลิเคชันไม่จำเป็นต้องเชื่อมต่อเซิร์ฟเวอร์เพื่อให้บริการ URL หากต้องการเปลี่ยนคุณควรกำหนดค่าเซิร์ฟเวอร์ของคุณและตั้งค่าโหมดเป็นโหมด API ประวัติ HTML5

สำหรับการกำหนดค่าเซิร์ฟเวอร์นี่คือลิงค์ที่จะช่วยคุณตั้งค่าเซิร์ฟเวอร์ Apache, Nginx และ Node.js:

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

จากนั้นคุณควรตรวจสอบให้แน่ใจว่าโหมดเราเตอร์ vue นั้นถูกตั้งค่าดังนี้:

vue-router เวอร์ชั่น 2.x

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

เพื่อให้ชัดเจนโหมดเหล่านี้เป็นโหมด vue-router ทั้งหมดที่คุณสามารถเลือกได้: "hash" | "ประวัติ" | "บทคัดย่อ".

สำหรับ Vuejs 2.5 & vue-router 3.0 ไม่มีอะไรข้างต้นทำงานได้สำหรับฉัน แต่หลังจากเล่นไปเรื่อย ๆ ดูเหมือนว่าจะทำงานได้ดังต่อไปนี้:

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

โปรดทราบว่าคุณจะต้องเพิ่มเส้นทาง catch-all

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

และเซิร์ฟเวอร์ได้รับการกำหนดค่าอย่างเหมาะสมใน Apache คุณควรเขียน url rewrite

<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 คือโหมดแฮช - ใช้แฮช URL เพื่อจำลอง URL แบบเต็มเพื่อไม่ให้เพจโหลดซ้ำเมื่อ URL เปลี่ยน

ในการกำจัดแฮชเราสามารถใช้โหมดประวัติของเราเตอร์ซึ่งใช้ประโยชน์จาก history.pushState API เพื่อให้ได้การนำทาง URL โดยไม่ต้องโหลดหน้าซ้ำ:

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

เมื่อใช้โหมดประวัติ URL จะมีลักษณะ "ปกติ" เช่น http://oursite.com/user/id http://oursite.com/user/idสวย!

มีปัญหามาที่นี่เนื่องจาก: แอพของเราเป็นแอปฝั่งไคลเอ็นต์หน้าเดียวโดยไม่มีการกำหนดค่าเซิร์ฟเวอร์ที่เหมาะสมผู้ใช้จะได้รับข้อผิดพลาด 404 หากพวกเขาเข้าถึงhttp://oursite.com/user/idโดยตรงในเบราว์เซอร์ ตอนนี้มันน่าเกลียด

ไม่ต้องกังวล: ในการแก้ไขปัญหาสิ่งที่คุณต้องทำคือเพิ่มเส้นทางสำรองทางเลือกทั้งหมดไปยังเซิร์ฟเวอร์ของคุณ หาก URL ไม่ตรงกับสินทรัพย์คงที่ใด ๆ ก็ควรให้บริการหน้า index.html เดียวกับที่แอปของคุณใช้อยู่สวยมากอีกครั้ง

การvue-routerใช้hash-modeงานในคำง่ายๆมันเป็นสิ่งที่คุณคาดหวังจากแท็ก achor เช่นนี้

<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

โหมดเริ่มต้นสำหรับ vue-router คือโหมดแฮช - ใช้แฮช URL เพื่อจำลอง URL แบบเต็มเพื่อไม่ให้เพจโหลดซ้ำเมื่อ URL เปลี่ยน ในการกำจัดแฮชเราสามารถใช้โหมดประวัติของเราเตอร์ซึ่งใช้ประโยชน์จากhistory.pushStateAPI เพื่อให้เกิดการนำทาง URL โดยไม่ต้องโหลดหน้าซ้ำ:

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
   }
]

การอ้างอิง

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

และถ้าคุณใช้ AWS amplify ให้ตรวจสอบบทความนี้เกี่ยวกับวิธีกำหนดค่าเซิร์ฟเวอร์: โหมดประวัติของเราเตอร์ Vue และ AWS Amplify