কিভাবে ইউআরএল থেকে হ্যাশবাং অপসারণ?

Question

কিভাবে #!ইউআরএল থেকে হ্যাশবাং অপসারণ ?

আমি ভ্যু রাউটার ডকুমেন্টেশনগুলিতে হ্যাশবাং নিষ্ক্রিয় করার বিকল্প পেয়েছি ( http://vuejs.github.io/vue-router/en/options.html ) তবে এই বিকল্পটি সরিয়ে ফেলেছে #!এবং ঠিক আছে#

পরিষ্কার ইউআরএল রাখার কোনও উপায় আছে কি?

উদাহরণ:

না: #!/home

কিন্তু: /home

Answer 1

আপনি আসলে সেট modeকরতে চান 'history'।

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

আপনার লিঙ্কগুলি হ্যান্ডেল করার জন্য সার্ভারটি কনফিগার করা আছে তা নিশ্চিত করুন। https://router.vuejs.org/guide/essentials/history-mode.html

Comments

ধন্যবাদ বিল এখানে আপনি হ্যাশব্যাং মিথ্যা অপসারণ করতে পারেন এখানে const router = new VueRouter({ history: true })

— কোডও রয়েছে

আমি github.com/vuejs/vue-hackernews নিয়ে খেলছিলাম এবং {history: true}প্রথম পৃষ্ঠার জন্য কাজগুলি যুক্ত করছি, তবে বাকি রুটগুলি ব্যর্থ হয়েছে।

— হরি কেটি

আপনি যখন অন্য রুটে অ্যাপ্লিকেশনটি পুনরায় লোড করেন তখন আপনি বোঝাতে চান? যদি তা হয় তবে আপনার সার্ভারটি সঠিকভাবে কনফিগার করতে হবে।

— বিল ক্রিসওয়েল

দয়া করে vue.js 2 তথ্য উত্তরের শুরুতে করুন

— ডায়রালিক

এটি কোন ফাইলে যুক্ত করা উচিত?

— ডেরজু

Answer 2

Vue.js এর জন্য 2 নিম্নলিখিতটি ব্যবহার করুন:

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

Comments

এখানে এই উত্তর এবং গৃহীত উত্তরের মধ্যে পার্থক্য কী?

— ইলিয়াস করিম

গৃহীত উত্তরটি সমাধান হওয়ার পরে তা সম্পাদিত হয়েছিল, আপনি গৃহীত উত্তরের সম্পাদনা লগটি পরীক্ষা করতে পারেন।

— ইস্রায়েল মোরালেস

Answer 3

হ্যাশ একটি ডিফল্ট ভ্যু-রাউটার মোড সেটিংস, এটি সেট করা হয়েছে কারণ হ্যাশ সহ, ইউআরএল পরিবেশন করার জন্য অ্যাপ্লিকেশনটিকে সার্ভারের সাথে সংযোগের প্রয়োজন নেই। এটি পরিবর্তন করতে আপনার সার্ভারটি কনফিগার করতে হবে এবং মোডটি HTML5 ইতিহাস এপিআই মোডে সেট করা উচিত।

সার্ভার কনফিগারেশনের জন্য এটি আপনাকে অ্যাপাচি, এনগিনেক্স এবং নোড.জেএস সার্ভার সেট আপ করতে সহায়তা করার লিঙ্ক:

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

তারপরে আপনার নিশ্চিত হওয়া উচিত, সেই ভ্যু রাউটার মোডটি নীচের মত সেট করা আছে:

ভিউ-রাউটার সংস্করণ 2.x

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

পরিষ্কার হওয়ার জন্য, এগুলি হ'ল সমস্ত রাউটার মোড যা আপনি চয়ন করতে পারেন: "হ্যাশ" | "ইতিহাস" | "বিমূর্ত"।

Answer 4

ভ্যুজেস 2.5 এবং ভিউ-রাউটার 3.0 এর জন্য আমার পক্ষে উপরের কিছুই কার্যকর হয়নি, তবে সামান্য কিছুটা খেলার পরে নীচেরটি মনে হয়:

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

মনে রাখবেন যে আপনাকে ক্যাচ-অল পাথ যুক্ত করতে হবে।

Comments

অন্যান্য উত্তরগুলির তুলনায় এটি আমার পক্ষে কাজ করেছিল। ধন্যবাদ আদিল!

— হুগো এস

Answer 5

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

এবং সার্ভারটি সঠিকভাবে কনফিগার করা হয়েছে অ্যাপাচে আপনার ইউআরএল পুনর্লিখন লিখতে হবে

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

Answer 6

দস্তাবেজগুলি উদ্ধৃত করা হচ্ছে।

ভ্যু-রাউটারের জন্য ডিফল্ট মোড হ্যাশ মোড full এটি একটি সম্পূর্ণ ইউআরএল অনুকরণ করতে URL হ্যাশ ব্যবহার করে যাতে URL পরিবর্তন হওয়ার সাথে সাথে পৃষ্ঠাটি পুনরায় লোড করা যায় না।

হ্যাশ থেকে পরিত্রাণ পেতে, আমরা রাউটারের ইতিহাস মোডটি ব্যবহার করতে পারি, যা ইতিহাস পুনরায় লোড ছাড়াই ইউআরএল নেভিগেশন অর্জন করতে ইতিহাসের সহায়তা করে p

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

ইতিহাস মোড ব্যবহার করার সময়, URL টি "স্বাভাবিক" দেখতে পাবেন, যেমন: http://oursite.com/user/id । সুন্দর!

যদিও এখানে একটি সমস্যা উপস্থিত রয়েছে: যেহেতু আমাদের অ্যাপ্লিকেশনটি কোনও সার্ভার কনফিগারেশন ছাড়াই একটি একক পৃষ্ঠার ক্লায়েন্ট সাইড অ্যাপ্লিকেশন, ব্যবহারকারীরা http://oursite.com/user/id অ্যাক্সেস করলে 404 ত্রুটি পাবেন তাদের ব্রাউজারে সরাসরি । এখন যে কুৎসিত।

উদ্বেগের দরকার নেই: সমস্যাটি সমাধান করার জন্য আপনাকে যা করতে হবে তা হ'ল আপনার সার্ভারে একটি সাধারণ ক্যাচ-অল ফ্যালব্যাক রুট যুক্ত করা। যদি URL কোনও স্থিতিশীল সম্পদের সাথে মেলে না, তবে এটি একই সূচক html পৃষ্ঠাতে পরিবেশন করা উচিত যা আপনার অ্যাপ্লিকেশন বাস করে Beautiful সুন্দর, আবার!

Answer 7

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: আপনার যদি সঠিকভাবে কনফিগার করা সার্ভার না থাকে বা আপনি যদি ক্লায়েন্ট-সাইড এসপিএ ব্যবহারকারী ব্যবহার করেন 404 Error তবে তারা https://website.com/posts/3তাদের ব্রাউজার থেকে সরাসরি অ্যাক্সেস করার চেষ্টা করলে একটি পেতে পারে । ভিউ রাউটার ডকস

Answer 8

ভ্যু-রাউটারের জন্য ডিফল্ট মোড হ্যাশ মোড full এটি একটি সম্পূর্ণ ইউআরএল অনুকরণ করতে URL হ্যাশ ব্যবহার করে যাতে URL পরিবর্তন হওয়ার সাথে সাথে পৃষ্ঠাটি পুনরায় লোড করা যায় না। হ্যাশ থেকে পরিত্রাণ পেতে, আমরা রাউটারের ইতিহাস মোডটি ব্যবহার করতে পারি, যা history.pushStateকোনও পৃষ্ঠা পুনরায় লোড ছাড়াই ইউআরএল নেভিগেশন অর্জনের জন্য এপিআইকে সহায়তা করে:

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

উল্লেখ

Comments

যদিও এই কোডটি প্রশ্নের সমাধান দিতে পারে, কেন / কীভাবে এটি কাজ করে তা প্রসঙ্গে যুক্ত করা ভাল। এটি ভবিষ্যতের ব্যবহারকারীদের শিখতে এবং তাদের নিজস্ব কোডটিতে এই জ্ঞানটি প্রয়োগ করতে সহায়তা করতে পারে। কোডটি ব্যাখ্যা করা হলে আপনিও upvotes আকারে ব্যবহারকারীদের কাছ থেকে ইতিবাচক প্রতিক্রিয়া জানাতে পারেন।

— borchvm

Answer 9

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

এবং যদি আপনি AWS পরিবর্ধক ব্যবহার করে থাকেন তবে কীভাবে সার্ভারটি কনফিগার করতে হয় তার নিবন্ধটি দেখুন: ভ্যু রাউটারের ইতিহাসের মোড এবং এডাব্লুএস প্রশস্তকরণ