路由器的两种工作模式:hash模式和history模式

路由器的两种工作模式:hash模式和history模式文章目录hash模式的路由器history模式的路由器history模式下的404问题及其解决方法打包前端项目express构建小型服务器前端打包文件部署至服务器解决404报错问题url中,#后面的字符串就是hash值。hash是和浏览器对话的,和服务器没有关系,hash值不会作为url的一部分发送给服务器。路由器(vue-router)有两种工作模式:hash模式和history模式,默认是hash模式。hash模式的路由器路由器默认的工作模式是hash模式。因此我们看到的是http://lo

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

url中,#后面的字符串就是hash值。
hash是和浏览器对话的,和服务器没有关系,hash值不会作为url的一部分发送给服务器。

路由器(vue-router)有两种工作模式:hash模式和history模式,默认是hash模式。

hash模式的路由器

路由器默认的工作模式是hash模式。因此我们看到的是
http://localhost:8080/#/
http://localhost:8080/#/about
http://localhost:8080/#/home

  • 普通组件components/Banner.vue
<template>
    <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header">
            <h2>Vue Router Demo</h2>
        </div>
    </div>
</template>

<script> export default { 
     name:"Banner" } </script>

<style> </style>

Jetbrains全家桶1年46,售后保障稳定

  • 路由组件pages/Home.vue
<template>
  <div>
    <h2>Home组件内容</h2>
  </div>
</template>

<script> export default { 
     name:'Home' } </script>

<style> </style>
  • 路由组件pages/About.vue
<template>
  <h2>我是About的内容</h2>
</template>

<script> export default { 
     name:'About' } </script>

<style> </style>
  • 路由器router/index.js
import VueRouter from "vue-router";
import Home from "../pages/Home";
import About from "../pages/About";

const router = new VueRouter({ 
   
    routes:[
        { 
      
            path:"/about",
            component:About
        },
        { 
   
            path:"/home",
            component:Home
        }
    ]
})

export default router;
  • App.vue
<template>
  <div>
    <div class="row">
      <Banner/>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <router-link to="/about" active-class="active" class="list-group-item">About</router-link>
          <router-link to="/home" active-class="active" class="list-group-item">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script> import Banner from "./components/Banner.vue"; export default { 
     name: 'App', components:{ 
     Banner } } </script>
  • 入口组件main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";

import router from "./router/index";

Vue.config.productionTip = false;

Vue.use(VueRouter);

new Vue({ 
   
  render: h => h(App),
  router:router
}).$mount('#app')
  • 启动应用,测试效果。
    在这里插入图片描述

history模式的路由器

路由器工作模式为history模式时,我们看到的是
http://localhost:8080/
http://localhost:8080/about
http://localhost:8080/home

  • 修改路由器router/index.js
    要将路由器的工作模式从默认的hash模式修改为history模式,只需要修改router/index.js,将mode设置为history
import VueRouter from "vue-router";
import Home from "../pages/Home";
import About from "../pages/About";

const router = new VueRouter({ 
   
    mode:"history",
    routes:[
        { 
      
            path:"/about",
            component:About
        },
        { 
   
            path:"/home",
            component:Home
        }
    ]
})

export default router;

在这里插入图片描述

  • 重启应用,测试效果。
    在这里插入图片描述

history模式下的404问题及其解决方法

打包前端项目

history模式下,npm run build打包项目,得到dist目录。
在这里插入图片描述

express构建小型服务器

  1. 初始化项目,npm init -y
  2. 安装express,npm install –save express
  3. 项目根目录下新建文件server.js
const express = require("express");

const app = express();

app.use(express.static(__dirname+"/static"));

app.get("/person",(request,response) => { 
   
    response.send({ 
   
        name:"Nicholas",
        gender:'Male'
    })
})

app.listen(3000,(err) =>{ 
   
    if(!err) console.log("服务器启动了!");
})
  1. 项目根目录下新建子目录static,static下新建文件index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
<body>
    <h2>hello</h2>
</body>
</html>
  1. 启动服务器,node server
D:\vue\vue_server>node server
服务器启动了!
  1. 打开浏览器,访问localhost:3000。
    在这里插入图片描述

前端打包文件部署至服务器

所谓“前端打包文件部署至服务器”,就是将前面得到的dist整个目录(及其子目录中的所有文件)放入服务器的static目录下。放好后,访问localhost:3000。
在这里插入图片描述
可以看到,history模式下的dist部署到服务器后,路由切换访问/home或/about时,没有问题。但在/home时刷新页面,显示无法找到,报404。
hash模式下的dist部署到服务器后,就不会出现以上问题。

解决404报错问题

刷新时报404的问题,需要后端程序员的帮助。本篇使用node示范下。

  • 安装第三方包,npm install –save connect-history-api-fallback。
  • 使用第三方包,修改server.js,如下。
const express = require("express");

const app = express();

const history = require("connect-history-api-fallback");
app.use(history());

app.use(express.static(__dirname+"/static"));

app.get("/person",(request,response) => { 
   
    response.send({ 
   
        name:"Nicholas",
        gender:'Male'
    })
})

app.listen(3000,(err) =>{ 
   
    if(!err) console.log("服务器启动了!");
})

在这里插入图片描述

  • 重启服务器,node server。
    在这里插入图片描述
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/234265.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • mybatis log plugin 激活码[免费获取]

    (mybatis log plugin 激活码)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

  • (实例篇)LNMP 1.4一键安装包,安装教程

    (实例篇)LNMP 1.4一键安装包,安装教程

  • java多线程–同步锁、

    java多线程–同步锁、同步代码块:语法:synchronized(同步锁){     需要同步操作的代码}—————————————————同步锁:为了保证每个线程都能正常执行原子操作,Java引入了线程同步机制.同步监听对象/同步锁/同步监听器/互斥锁:对象的同步锁只是一个概念,可以想象为在对象上标记了一个锁….

  • 解决IDEA插件安装慢、超时、不成功问题[通俗易懂]

    解决IDEA插件安装慢、超时、不成功问题[通俗易懂]解决IDEA插件安装慢、超时、不成功问题1.修改本地hosts文件,打开文件位置:Windows系统Hosts文件路径:C:\Windows\System32\drivers\etc\hosts用工具打开hosts文件2.打开国内插件的节点IP地址http://tool.chinaz.com/speedtest/plugins.jetbrains.com在检测结果中选择一个相对耗时少的IP地址,因为比较快然后按照第一步在hosts文件里加上即可,然后保存(需要以管理员身份)3.重

  • BP神经网络的Matlab实现——人工智能算法

    BP神经网络的Matlab实现——人工智能算法这几天在各大媒体上接触到了人工智能机器学习,觉得很有意思,于是开始入门最简单的机器算法——神经网络训练算法(NeuralNetworkTraining);以前一直觉得机器学习很高深,到处是超高等数学、线性代数、数理统计。入坑发现确实是这样!但是呢由项目实例驱动的学习比起为考试不挂科为目的的学习更为高效、实用!在遗传算法、神经网络算法的学习入门之后觉得数学只要用心看没问题的(即使是蒙特卡洛和马尔

  • 【图文】什么是php位运算与二进制[通俗易懂]

    【图文】什么是php位运算与二进制

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号