问题描述:在使用Vue开发页面时默认请求地址会出现#号,在一些场景中,例如:微信支付时,分享的url作为参数传递,url不能带#号。
http://elevenking.com/shark/#/
问题解决:vue-router提供了两种模式
- hash 模式
vue-router 默认为 hash 模式,当 URL 改变时,页面不会重新加载,只是根据 hash 来更换显示对应的组件,这就是所谓的单页面应用。
- history 模式
当使用 history 模式时,URL不再出现#号,修改如下:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Header from '../components/header'
import Footer from '../components/footer'
import Home from '../views/home'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
components: {
default: Home,
header: Header,
content: Home,
footer: Footer
},
meta: {
title: '小鲨鱼微开发'
}
}
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router
新增:
mode: 'history',