Vue2笔记05 路由，项目上线部署，element-ui

路由

概念理解

vue-router

        vue的一个插件库，专门用来实现SPA应用

---

SPA(单页Web应用：single page web application)

        整个应用只有一个完整的页面

        点击页面中的导航链接不会刷新页面，只会做页面的局部更新

        数据需要通过ajax请求获取

---

路由

        一个路由就是一组映射关系(key - value)

        key为路径，value可能是function或component

---

路由分类

        后端路由：value是function，用于处理客户端提交的请求。服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

        前端路由：value是component，用于展示页面内容。当浏览器路径改变，对应的组件显示

使用

安装

//默认4版本只能在Vue3中使用
npm i vue-router
//3
npm i vue-router@3

创建router文件夹，index.js

main.js

App.vue

注意

路由组件通常存放在pages文件夹

通过切换，“隐藏”了的路由组件默认是被销毁掉的，需要时再去挂载

每个组件都有自己的$route属性，里面存储着自己的路由信息

整个应用只有一个router，可以通过组件的$router属性获取到

嵌套(多级)路由

路由传参

query传参

接收

命名路由

一级路由不如不写

param参数

props配置

第一种写法

第二种写法

第三种写法

router-link的replace属性

控制路由跳转时操作浏览器历史记录的模式

浏览器的历史记录有两种写入方式，分别为push和replace，push是追加历史记录，replace是替换当前记录，路由跳转默认为push

编程式路由导航

不借助router-link实现跳转

两个跳转API

前进，后退API

缓存路由组件

New组件

 当切换路由时，会销毁组件，想要保存数据将路由组件包含在keep-alive标签中

这样再次切换回来时组件数据依然存在

两个新的生命周期钩子

此时缓存了组件，不触发销毁，也就不会清除定时器，引出两个路由组件独有生命周期钩子

前置路由守卫

保卫路由安全（权限）

但是此处的判断过于麻烦可以使用下方meta配置项

后置路由守卫

独享路由守卫

组件内路由守卫

hash和history

项目上线

项目编译

npm run build

等待运行完成可在dist文件夹下，查看打包下来的文件

 

搭建服务器

node.js+express搭建微型服务器

1、新建文件夹

2、使用VsCode打开文件夹

3、初始化并命名，一路回车

4、安装express

5、创建服务器主文件

6、启动服务器

7、测试

8、新建static文件夹，创建index.html

9、访问静态页面，因为是index.html，所以默认访问，其他页面：localhost:5005/xxx.html

部署

将dist文件夹下生成的文件放入static

再次启动服务器，访问

路由模式history模式存在的问题

此时通过路由跳转是没问题的，但是如果路由跳转后再刷新页面，就会出现问题

页面路径被当成资源请求服务器了

hash模式

更改路由模式为hash，重新打包，部署，启动服务器

此时就不会出现上面刷新报错的问题了

解决history路由模式存在的问题

服务器中安装插件：connect-history-api-fallback

再次启动就解决了刷新404的问题！

element-ui

基于Vue的PC端组件库

使用

安装

npm i element-ui -s

引入及使用

完整引入

根据element-ui文档编码

如果想要对组件进行细微调整，可自己写一些css代码

按需引入

安装babel-plugin-component

npm install babel-plugin-component -D

修改babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["es2015", { "modules": false }]
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

main.js引入

去掉 el- 即是我们需要引入的内容

此时如果编译报错Plugin/Preset files are not allowed to export objects，作如下修改

 脚手架版本问题