Vue.js -如何删除hashbang #!从url ?

如何从url删除hashbang #! ?

我在vue路由器文档(http://vuejs.github.io/vue-router/en/options.html)中找到了禁用hashbang的选项，但这个选项删除了#!，只放了#

有没有办法有干净的url?

例子:

不是:#!/home

但是:/home

谢谢!

198621 次浏览
小开
最佳答案

在Vue 3中，你需要使用createWebHistory作为history选项。

import { createRouter, createWebHashHistory } from 'vue-router'


const router = createRouter({
history: createWebHashHistory(),
// ...
})

在Vue 2中，你需要将mode设置为'history'。

const router = new VueRouter({
mode: 'history',
// ...
})
但是，请确保您的服务器已配置为处理这些链接。 https://router.vuejs.org/guide/essentials/history-mode.html < / p >
小开 
window.router = new VueRouter({
hashbang: false,
//abstract: true,
history: true,
mode: 'html5',
linkActiveClass: 'active',
transitionOnLoad: true,
root: '/'
});

且服务器配置正确 在apache你应该写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>
小开

对于vue.js 2，使用以下方法:

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

散列是vue-router模式的默认设置，之所以设置它是因为使用散列，应用程序不需要连接服务器来提供url。要改变它，你应该配置你的服务器，并将模式设置为HTML5 History API模式。

对于服务器配置，这是帮助你设置Apache, Nginx和Node.js服务器的链接:

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

然后你应该确保，vue路由器模式设置如下:

Vue-router version 2.x

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

需要明确的是，这些都是你可以选择的vue-router模式:|“history"|“abstract"。

小开

引用文档。

vue-router的默认模式是哈希模式-它使用URL哈希来 模拟一个完整的URL，这样页面将不会被重新加载的URL 变化。< / p > 要摆脱散列，我们可以使用路由器的历史模式 利用历史。pushState API实现URL导航 页面重载:

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

当使用历史模式时，URL将看起来“正常”，“正常”;如。 http://oursite.com/user/id。漂亮!< / p > 但是，这里有一个问题:由于我们的应用程序是一个单页客户端 侧应用程序，没有适当的服务器配置，用户将得到一个 404错误，如果他们访问http://oursite.com/user/id直接在 浏览器。

别担心:要解决这个问题，你所需要做的就是添加一个简单的 捕捉到服务器的所有回退路由。如果URL不匹配 静态资产，它应该服务于相同的index.html页面，你的应用程序 住在。又漂亮,!< / p >

小开

对于Vuejs 2.5 &Vue-router 3.0上面的东西都不适合我，但是在玩了一会儿之后，下面的东西似乎有用:

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

注意，您还需要添加catch-all路径。

小开
vue-router的默认模式是哈希模式-它使用URL哈希来模拟完整的URL，这样当URL改变时页面就不会被重新加载。 为了摆脱散列，我们可以使用路由器的历史模式，它利用history.pushState API来实现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
}
]

参考

小开

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路由器文档 < / p >

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

如果您正在使用AWS放大，请查看关于如何配置服务器:Vue路由器的历史模式和AWS Amplify的文章

小开

你应该添加模式历史到你的路由器如下所示

export default new Router({
mode: 'history',
routes: [
{
...
}
]
})
小开

对于Vue 3，更改如下:

const router = createRouter({
history: createWebHashHistory(),
routes,
});

对此:

const router = createRouter({
history: createWebHistory(),
routes,
});

来源:https://next.router.vuejs.org/guide/essentials/history-mode.html#hash-mode

小开

打开src->router->index.js文件

在这个文件的底部:

const router = new VueRouter({
mode: "history",
routes,
});
小开

只需将router.js文件中的createWebHashHistory替换为createWebHistory

小开

上面的几个很好的描述把我带进了兔子洞，直到我意识到“createwebhistory”;createWebHashHistory"存在于router/index.js文件的两个地方。一次是在文件末尾的常量定义中，一次是在文件顶部的vue-router导入中。

在router/index.js文件的末尾找到

  const router = createRouter({
mode: 'history',
history: createWebHistory(),
// history: createWebHashHistory(),
routes
})

router/index.js文件的第一行

import { createRouter, createWebHistory } from 'vue-router'
// import { createRouter, createWebHashHistory } from 'vue-router'

现在它就像一个魅力，感谢上面所有的人指引我走上这条成功之路!

小开

在Vue 3中，你可以使用包vue-router提供的createWebHistory模块来获得一个干净的URL。

import { createRouter, createWebHistory } from 'vue-router'


const router = createRouter({
history: createWebHistory(),
// ...
})

还有另一个模块在名为createWebHashHistory的URL中保存“#”符号，它帮助浏览器导航到特定的元素。

import { createRouter, createWebHashHistory } from 'vue-router'


const router = createRouter({
history: createWebHashHistory(),
// ...
})

如果你不希望URL中有'#'符号，你可能更喜欢使用createWebHistory而不是createWebHashHistory。

想了解更多信息，请查看他们的文档: https://router.vuejs.org/guide/essentials/history-mode.html < / p >


提交答案