vue路由history模式,vue mode history

　　用Vue.js vue-router创建单页应用程序非常简单。使用Vue.js，我们已经可以通过组合组件来编写应用程序。当你想添加vue-router时，我们需要做的是将组件映射到路线，然后告诉vue-router在哪里渲染它们。

　　一般单页应用的URL都会有#的哈希模式，因为整个应用本身只有一个HTML，其他都是路由器渲染的。因为业务需要，或者仅仅是因为有#标志不美观，可以使用历史模式。简单地说，您可以在路由器的配置文件index.js中添加以下代码行：

　　历史：模式

　　没错，这样网址就不会再有#号了，你会发现整个地址栏又回到了你熟悉的样子。但是，接下来介绍的内容很重要。可能很多刚入门的新人或多或少都会遇到这样的一两个坑…

　　无法呈现页面。

　　这里以我写的一个项目为例。当我启动历史模式时，我没有对路线做任何事情。在开发阶段一切正常，但是在打包之后，访问项目路径：

　　sdp.driver.com/driver/

　　会发现页面是空白的，但是静态文件可以正常引用。因为使用了YII的模块，所以除了域名之外，还将包括驱动程序模块的名称。很多普通人创建的项目都放在根目录下，即：

　　sdp.driver.com

　　这样的形式，没问题。但是，如果模块被配置或放置在子文件夹下，就会出现问题。其实这是因为router找不到路径中的组件，所以无法渲染。只需在router中修改index.js，并在每个路径中添加您的项目名称，这样就可以成功了。

　　最后一页效果：

　　404错误

　　在历史模式下，如果直接通过地址栏访问路径，会得到404错误。这是因为这是一个单页应用(废话)……实际上是因为调用了history.pushState API，所以所有的跳转等操作都是通过router实现的。解决这个问题很简单。如果URL不匹配任何静态资源，您只需要在后台配置跳转到默认的index.html。具体配置如下：

　　街头流氓

　　IfModule mod_rewrite.c

　　重写引擎开启

　　重写库/重写规则^index\.html $-[L]rewrite cond % { REQUEST _ FILENAME }！-f第二次重写% {请求文件名}！-d重写器。/index.html [L] /IfModule

　　12345678

　　服务器

　　位置/{

　　try _ files $ uri $ uri//index . html；

　　}

　　Node.js (Express)

　　关于每次单击链接时刷新页面。

　　众所周知，单页应用的发展是因为丝滑流畅的体验。如果每次点击都刷新页面…

　　原因是window.location用于跳转，只有使用路由器提供的方法才能解决这个问题：

　　在main.js中将路由器配置并绑定到全局

　　Vue.prototype.router=路由器；

　　之后，使用以下方法来控制跳跃。

　　this.router.push(驱动程序/服务)；

　　好了，关于Vue路由的这个“坑”就到这里了。以后会发表更多高质量的文章。如果对你有帮助，请喜欢。谢谢你。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。