blocks|key|4442608|text|您实际上只需要将mode设置为'history'即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4442609|const+router+=+new+VueRouter({
++mode:+'history'
})|code-block|syntax|javascript|4442610|不过，请确保您的服务器已配置为可以处理这些链接。https://router.vuejs.org/guide/essentials/history-mode.html|4442611|entityMap|0|LINK|mutability|MUTABLE|url|https://router.vuejs.org/guide/essentials/history-mode.html^0|8|4|F|9|0|0|O|1N|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

You'd actually just want to set <code>mode</code> to <code>'history'</code>.
<pre class="lang-js prettyprint-override"><code>const router = new VueRouter({
 mode: 'history'
})
</code></pre>
Make sure your server is configured to handle these links, though.
<a href="https://router.vuejs.org/guide/essentials/history-mode.html" rel="noreferrer">https://router.vuejs.org/guide/essentials/history-mode.html</a>

blocks|key|4442663|text|对于vue.js+2，请使用以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4442664|const+router+=+new+VueRouter({
+mode:+'history'
})|code-block|syntax|javascript|4442665|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For vue.js 2 use the following:
<pre class="lang-js prettyprint-override"><code>const router = new VueRouter({
 mode: 'history'
})
</code></pre>

blocks|key|4442482|text|对于Vuejs+2.5和vue-router+3.0，上面的东西对我来说都不起作用，但在尝试了一下后，似乎可以做到以下几点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4442483|export+default+new+Router({
++mode:+'history',
++hash:+false,
++routes:+[
++...
++++,
++++{+path:+'*',+redirect:+'/'+},+//+catch+all+use+case
++],
})|code-block|syntax|javascript|4442484|请注意，您还需要添加catch-all路径。|4442485|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

For Vuejs 2.5 &amp; vue-router 3.0 nothing above worked for me, however after playing around a little bit the following seems to work:
<pre class="lang-js prettyprint-override"><code>export default new Router({
 mode: 'history',
 hash: false,
 routes: [
 ...
 ,
 { path: '*', redirect: '/' }, // catch all use case
 ],
})
</code></pre>
note that you will also need to add the catch-all path.

blocks|key|4442662|text|对于Vue+3，请更改此设置：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4442663|const+router+=+createRouter({
++++history:+createWebHashHistory(),
++++routes,
});|code-block|syntax|javascript|4442664|要这样做：|4442665|const+router+=+createRouter({
++++history:+createWebHistory(),
++++routes,
});|4442666|来源：https://next.router.vuejs.org/guide/essentials/history-mode.html#hash-mode|offset|length|4442667|entityMap|0|LINK|mutability|MUTABLE|url|https://next.router.vuejs.org/guide/essentials/history-mode.html#hash-mode^0|0|0|0|0|3|22|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

For Vue 3, change this :
<pre><code>const router = createRouter({
 history: createWebHashHistory(),
 routes,
});
</code></pre>
To this :
<pre><code>const router = createRouter({
 history: createWebHistory(),
 routes,
});
</code></pre>
Source : <a href="https://next.router.vuejs.org/guide/essentials/history-mode.html#hash-mode" rel="noreferrer">https://next.router.vuejs.org/guide/essentials/history-mode.html#hash-mode</a>

blocks|key|4442440|text|window.router+=+new+VueRouter({
+++hashbang:+false,
+++//abstract:+true,
++history:+true,
++++mode:+'html5',
++linkActiveClass:+'active',
++transitionOnLoad:+true,
++root:+'/'
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4442441|并在apache中正确配置了服务器，则应重写url。|unstyled|4442442|<IfModule+mod_rewrite.c>
++++RewriteEngine+On
++++RewriteBase+/
++++RewriteRule+%5Eindex\.html$+-+[L]
++++RewriteCond+%25{REQUEST_FILENAME}+!-f
++++RewriteCond+%25{REQUEST_FILENAME}+!-d
++++RewriteRule+.+/index.html+[L]
+</IfModule>|4442443|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre class="lang-js prettyprint-override"><code>window.router = new VueRouter({
 hashbang: false,
 //abstract: true,
 history: true,
 mode: 'html5',
 linkActiveClass: 'active',
 transitionOnLoad: true,
 root: '/'
});
</code></pre>
and server is properly configured
In apache you should write the url rewrite
<pre><code>&lt;IfModule mod_rewrite.c&gt;
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.html [L]
 &lt;/IfModule&gt;
</code></pre>

blocks|key|4442564|text|vue-router使用了hash-mode，简而言之，这是你通常会从如下的achor标签中期望得到的东西。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4442565|<a+href="#some_section">link<a>|code-block|syntax|javascript|4442566|要使散列消失，请执行以下操作|4442567|const+routes+=+[
++{
++++path:+'/',
++++name:+'Home',
++++component:+Home,
++},
]+//+Routes+Array
const+router+=+new+VueRouter({
++mode:+'history',+//+Add+this+line
++routes
})|4442568|Warning：如果您没有正确配置的服务器，或者您正在使用客户端SPA，则如果用户尝试从其浏览器直接访问https://website.com/posts/3，则可能会获得https://website.com/posts/3。Vue+Router+Docs|4442569|entityMap|0|LINK|mutability|MUTABLE|url|https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations^0|0|A|D|9|0|0|0|0|0|7|1G|R|2E|R|36|F|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|Q|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

The <code>vue-router</code> uses <code>hash-mode</code>, in simple words it is something that you would normally expect from an achor tag like this.

<pre class="lang-html prettyprint-override"><code>&lt;a href="#some_section"&gt;link&lt;a&gt;
</code></pre>

To make the hash disappear 

<pre class="lang-js prettyprint-override"><code>const routes = [
 {
 path: '/',
 name: 'Home',
 component: Home,
 },
] // Routes Array
const router = new VueRouter({
 mode: 'history', // Add this line
 routes
})
</code></pre>

<code>Warning</code>: If you do not have a properly configured server or you are using a client-side SPA user may get a <code>404 Error</code>
if they try to access <code>https://website.com/posts/3</code> directly from their browser.
<a href="https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations" rel="noreferrer">Vue Router Docs</a>

blocks|key|4442929|text|上面几个很好的描述让我陷入了困境，直到我意识到替代"createWebHashHistory“的"createWebHistory”存在于router/index.js文件中的两个位置。一次在文件末尾的常量定义中，另一次在文件顶部的从vue-router导入时。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4442930|在路由器/index.js文件的末尾找到|4442931|++const+router+=+createRouter({
++++mode:+'history',
++++history:+createWebHistory(),
++++//+history:+createWebHashHistory(),
++++routes
++})|code-block|syntax|javascript|4442932|router/index.js文件的第一行|4442933|import+{+createRouter,+createWebHistory+}+from+'vue-router'
//+import+{+createRouter,+createWebHashHistory+}+from+'vue-router'|4442934|现在它就像一个护身符，感谢上面所有带领我走上成功之路的人！|4442935|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Several good descriptions above lead me into rabbit hole until I realized the &quot;createWebHistory&quot; which replaces &quot;createWebHashHistory&quot; exists in two places in the router/index.js file. Once in the definition of the constant at the end of the file and again on the import from vue-router at the top of the file.
Found down at the end of the router/index.js file
<pre><code> const router = createRouter({
 mode: 'history',
 history: createWebHistory(),
 // history: createWebHashHistory(),
 routes
 })
</code></pre>
First line in router/index.js file
<pre><code>import { createRouter, createWebHistory } from 'vue-router'
// import { createRouter, createWebHashHistory } from 'vue-router'
</code></pre>
Now it works like a charm, thank you all above that lead me down this path to success!

blocks|key|4442806|text|const+router+=+new+VueRouter({
++mode:+'history',
++routes:+[...]
})|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4442807|如果您正在使用AWS+amplify，请查看这篇文章，了解如何配置服务器：Vue+router’s+history+mode+and+AWS+Amplify|unstyled|offset|length|4442808|entityMap|0|LINK|mutability|MUTABLE|url|https://medium.com/@denis.dmitriyeff/vue-routers-history-mode-and-aws-amplify-762c29fdb6df^0|0|11|15|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre class="lang-js prettyprint-override"><code>const router = new VueRouter({
 mode: 'history',
 routes: [...]
})
</code></pre>
And if you are using AWS amplify, check this article on how to configure server: <a href="https://medium.com/@denis.dmitriyeff/vue-routers-history-mode-and-aws-amplify-762c29fdb6df" rel="nofollow noreferrer">Vue router’s history mode and AWS Amplify</a>

blocks|key|4442652|text|您应该将模式历史记录添加到您的路由器，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4442653|export+default+new+Router({
++mode:+'history',
++routes:+[
++++{
+++++...
++++}
++]
})|code-block|syntax|javascript|4442654|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You should add mode history to your router like the below
<pre class="lang-js prettyprint-override"><code>export default new Router({
 mode: 'history',
 routes: [
 {
 ...
 }
 ]
})
</code></pre>

blocks|key|4442679|text|在src->router->index.js中打开该文件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4442680|在此文件的底部：|4442681|const+router+=+new+VueRouter({
++mode:+"history",
++routes,
});|code-block|syntax|javascript|4442682|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Open the file in src-&gt;router-&gt;index.js
At the bottom of this file:
<pre><code>const router = new VueRouter({
 mode: &quot;history&quot;,
 routes,
});
</code></pre>

blocks|key|4442896|text|只需在router.js文件中用createWebHistory替换createWebHashHistory即可|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4442897|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Just replace createWebHashHistory with createWebHistory in router.js file

How to remove hashbang <code>#!</code> from url?
I found option to disable hashbang in vue router documentation ( <a href="http://vuejs.github.io/vue-router/en/options.html" rel="noreferrer">http://vuejs.github.io/vue-router/en/options.html</a> ) but this option removes <code>#!</code> and just put <code>#</code>
Is there any way to have clean url?
Example:
NOT: <code>#!/home</code>
BUT: <code>/home</code>
Thanks!

Vue.js - How to remove hashbang #! from url?

服务器

路由器

路由

如何从url中删除hashbang #!？我在vue路由器文档(  )中找到了禁用#!的选项，但是这个选项删除了#，只放入了hashbang有没有办法拥有干净的url？示例：不是：#!/home但是：/home谢谢!

问Vue.js -如何删除hashbang #！从url？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue.js -如何删除hashbang #！从url？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue.js -如何删除hashbang #！从url？
EN