Vue Router

Vue Router基础回顾

1、配置

（1）在index.js中Vue.use用来注册插件，他会调用传入对象的install方法

（2）路由规则，存一些数组，创建路由对象

2、使用步骤

（1）创建路由组件（视频）

（2）创建路由插件

（3）创建router对象，配置路由规则

（4）通过router view占位

（5）通过router link创建链接

动态路由

1、加载详情页使用路由懒加载

2、根据id获取详情

（1）通过当前路由规则，获取数据（不太好）

（2）配置详情路由的时候，开启props，通过props来接收URL参数，在组件中通过props接收参数id

嵌套路由

 

Vue Router编程式导航

参数接收有两种方式；

（1）replace方法跳转的路由地址

（2）push传对象

Hash和History模式区别

1、表现形式的区别：

hash模式

（1）路径中带着#，#后面的内容是路由地址，不好看，路径中带着与数据无关的符号

（2）基于锚点，以及onhashchange事件；通过锚点的值作为路由地址，当地址发生变化后，触发onhashchange事件。根据路径决定页面上呈现的内容。

history模式

（1）是一个正常的url，需要服务器的配置

（2）基于HTML5中的History API

history.pushState()，IE10以后才支持

history.replaceState()

 History模式的使用

1、History需要服务器的支持

2、单页应用中，服务器端不存在http://www.testurl.com/login这样的地址，会返回找不到该页面

3、在服务器端应该除了静态资源外都返回翻页面应用的index.html

History模式---Node.js服务器配置

1、注册处理history模式中间件

2、处理静态资源的中间件，网站根目录../web

History模式---nginx服务器配置

1、从官网下载nginx的压缩包

2、把压缩包解压到C盘根目录，c:\nginx-1.18.0；目录不能有中文，1.18.0是版本号

3、打开命令行，切换到目录c:\nginx-1.18.0

4、启动nginx

（1）启动 start nginx

（2）重启 nginx -s reload

（3）停止 nginx -s stop

5、配置history模式：nginx.conf

location / {
    root  html;
    index index.html index.htm
     try_files $uri $uri/ /index.html
}