如何删除hashbang #!从url ?
我在vue路由器文档(http://vuejs.github.io/vue-router/en/options.html)中找到了禁用hashbang的选项,但这个选项删除了#!然后输入#
有没有办法有干净的url?
例子:
不是:# !/家庭
但是:/家庭
谢谢!
如何删除hashbang #!从url ?
我在vue路由器文档(http://vuejs.github.io/vue-router/en/options.html)中找到了禁用hashbang的选项,但这个选项删除了#!然后输入#
有没有办法有干净的url?
例子:
不是:# !/家庭
但是:/家庭
谢谢!
当前回答
对于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模式:"hash" | "history" | "abstract"。
vue-router使用哈希模式,简单地说,它是您通常期望从这样的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
})
警告:如果您没有正确配置服务器,或者您正在使用客户端SPA用户,可能会得到404错误 如果他们试图直接从浏览器访问https://website.com/posts/3。 Vue路由器文档
你应该添加模式历史到你的路由器如下所示
export default new Router({
mode: 'history',
routes: [
{
...
}
]
})
vue-router的默认模式是哈希模式——它使用URL哈希来模拟完整的URL,这样当URL更改时页面就不会被重新加载。 为了摆脱散列,我们可以使用路由器的历史模式,它利用了历史。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 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