单页面与多页面的区别

传统页面和单页面

传统页面，就好多个页面，

单页面就一个页面，需要用到路由，跳转，更新

传统页面的首屏、SEO(搜索引擎)比单页面快；

单页面

1. 公共资源只需要加载一次

2. 单页面 页面切换 比传统页面快

3. 兼容性没有传统的兼容

结论：服务端渲染（服务端生成HTML源码发给客户端）速度优于单页面应用 （服务端返回json数据，前端根据数据动态生成拼接html源码，然后渲染）

router 动态路由传参数

path:/detail/:id
​
获取id    this.$route.parpams.id   
##这两个id要一样

在创建路由的时候会有一个参数，是base

主要是在上线的时候在域名下放两个

域名是 phpstudy_pro（默认是在d盘下的） 里面的www 的文件夹下 和网页是映射关系

使用npm run build打包把整个dist（包括dist）内容放在 www文件夹下

还需要在vue.config里面也加上

const router = new VueRouter({
  routes,
  base:'/toutiao/',
})
​
publicPath(脚手架):process.env.NODE_ENV==='production'? '/toutiao/': '/'
​
用build模式打包
​
index里面的base 还有vue.config里面的还有www文件夹下的文件名必须必须都一样！！！！
​

在webapp 有两个模式，哈西模式和history模式

• http：localhost/toutiao/#money

• #后面是哈西

• 当超链接的href不是网页，是哈西值的话，不会跳转

<a href="#lashi">历史</a>
​
<div id="lashi">kjdflkjldksjf </div>

vue使用的就是导航的url 就是哈西 而且哈西值兼容性好

history 不能刷新 刷新找不到

就是在

const router = new VueRouter({
  routes,
  base:'/toutiao/',
  mode:'history'
})

history模式，刷新到不到的原因

• hash模式，重新刷新的话会重新请求，不会把hash包括在内

• history模式，重新刷新的话会重新请求，把后面的hash也包含在内

• 

• localhost/toutiao/hot————-history

• localhost/toutiao#/hot——

  1. 重新请求

  2. 找到路由

  3. 然后对应的组件

  4. 返回

history解决办法

在phpstudy里面找到，如果返回404设置成返回index.html

设置

try_files $uri $uri/ /admin/index.html;   把admin改成自己的，这里我用的是douyin 

打开是这样的

我们再复制一份，来设置自己的

最后要从新打包，从新开启服务器