vue-router 去掉#

　　vue-router默认的路由模式是hash，我们要去掉url中的#需要将路由模式切换为history

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

　　这样子，url中的#就可以去掉了，在开发环境下不会出问题，部署上线后点击正常，但是...你一旦手动点击浏览器的刷新按钮，页面显示nginx的404页面。

　　怎么解决呢？在vue-router官网有说明：这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

　　所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。我们线上的服务器用的是nginx，需要改为下面的配置：

# 项目部署在服务器/test目录下（访问地址：http://www.a.com/test）

location ^~/test {

     alias   D:/project/card-web/code/dist/;try_files  $uri $uri/ @card;access_log  logs/card_web.access.log ;error_log  logs/card_web.error.log ;}location @card {rewrite ^/(test)/(.+)$ /$1/index.html last;} # 项目部署在服务器/下（访问地址：http://www.a.com）

 location / {root   D:/project/card-web/code/dist/;index  index.html index.htm;try_files $uri $uri/ /index.html;}

　　这样子，无论你怎么刷新页面都不会报404了。。。贼开心。。。

　　然而，点进去一个二级路由发现，页面中的图片全都没有加载成功。。。vue-router官网有这么一句话：要注意，以 / 开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径。

　　我页面中是这么写的：

<img :src="`./static/image/real-time-monitoring/online-line.png`"alt="" class="line-img line-rotation">

　　f12后发现，浏览器的请求路径是：

Request URL: http://localhost:8080/cardapp/card/static/image/real-time-monitoring/online-line.png

　　我的路由：

{path: '/cardapp',component: CardApp,name: 'cardapp',children:[{ path: 'card', component: add}]
}

　　解决办法：

<img :src="`/static/image/real-time-monitoring/online-line.png`"alt="" class="line-img line-rotation">

　　原因：这图片处在嵌套路由下，这个嵌套路由以 / 开头，会被当做根路径，之前写的相对路径会拼接到这个嵌套路由下，所有会出现图片路径会加上当前路由了。

转载于:https://www.cnblogs.com/hanshuai/p/9930063.html

vue-router 去掉#相关推荐

Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
vue router 入门笔记
vue router 入门笔记 tips: components优先级大于component,即当一个route对象里同时配置了component和components时component视为无效即 ...
你可能不清楚的 Vue Router 深度用法（一）
Vue Router 简单易上手,能实现大部分的需求.但是,如果在项目里需要更细致的控制路由,以实现与其同步的效果,就需要挖掘其文档里没详细提及的内容.第一章为路由元信息用途挖掘. 路由元信息用途 ( ...
vue router html,vue-router.html
Document Hello App! Go to Foo Go to Bar // 1. 定义(路由)组件. // 可以从其他文件 import 进来 const Foo = { template: ...
Vue.js 从 Vue Router 0.7.x 迁移
从 Vue Router 0.7.x 迁移只有 Vue Router 2 是与 Vue 2 相互兼容的,所以如果你更新了 Vue ,你也需要更新 Vue Router .这也是我们在主文档中将迁移路 ...
你可能不清楚的 Vue Router 深度用法（二）
此为 Vue Router 深度用法的第二篇,主要讲述动态路由匹配用法.第一篇的链接在此: https://segmentfault.com/a/11... 动态路由匹配是用于把某种模式匹配到的所有路 ...
vue router html后缀,vue-router.html
Document Hello App! Go to Foo Go to Bar // 1. 定义(路由)组件. // 可以从其他文件 import 进来 const Foo = { template: ...
vue require css html,requirejs vue vue.router简单框架
index.html 入口页面html> vue `menu`.`name` base.js requirejs 配置文件(function(){ requirejs.config({ ...
Vue Router 4.0 正式发布！焕然一新。
关注若川视野,回复"pdf" 领取资料,回复"加群",可加群长期交流学习 12月8日,Vue Router 4 正式发布稳定版本. 在经历了 14 个 Alph ...
vue router 参数_Vue.js项目开发技术解析
Vue.js项目开发技术解析一.Vue.js实例在一个Vue.js工程中,用于显示内容最基层的实例称之为根实例.通过该实例可以进行页面或组件的更新和显示.对于项目本身而言,无论是什么样的页面,都要 ...

vue-router 去掉#

vue-router 去掉#相关推荐

最新文章

热门文章