【Vue2前端路由(vue-router的使用)】一.vue2+axios+Express+MySQL实现前后端交互；二.vue2的前端路由（Vue-router）；三.动态路由

目录

一.vue2+axios+Express+MySQL实现前后端交互

1.后台：

（1）确定MySQL的表格：明确数据库 --- 数据表

（2）创建Express项目：mysql2、cors、Sequelize（ORM）、nodemon

（3）dao层（model、连接数据库、crud操作）----核心

（4）service层（调用dao层）

（5）接口层（接口地址与service层的方法的映射）

（6）接口测试

2.前端

（1）创建vue2项目

（2）安装axios库

（3）创建组件：与后台进行交互实现增、删、查

二.vue2的前端路由（Vue-router）

1.路由：页面地址与组件之间的对应关系

2.路由方式：服务器端路由、前端路由

3.前端路由：在前端维护一组路由规则（地址和组件之间的对应关系），模式有两种：

（1）hash模式：类似于锚点。在地址前带有#

（2）History模式：由Html5使用，地址前不带#，地址之间用'/'分隔。需要服务器端的辅助

4.SPA：单页面使用（Single Page Application）

5.前端路由的工作方式：

（1）用户点击页面中的路由链接

（2）URL的hash地址就会发生改变

（3）前端路由监听到了URL的改变

（4）前端路由会查找路由表，将hash地址对应的组件渲染到浏览器中

6.vue-router路由模块：是由vue.js官方给出的前端路由模块，只能和vue项目结合，方便SPA项目实现组件之间的切换

（1）vue-router的版本：

（2）vue-router的组成部分：

 7.示例：

（1）创建三个组件：Home、Movie、About

（2）在src下创建router/index.js

（3）在src/main.js入口文件中挂载路由器

（4）在App.vue中声明路由链接：和渲染组件的

（5）在src/router/index.js中维护一个路由表

8.vue-router中常用的方法

（1）路由重定向：使用redirect属性，用户在访问地址A时，强制用户跳转到地址C

（2）嵌套路由：在组件中嵌套显示组件（通过路由实现组件的嵌套显示）

三.动态路由

1.什么是动态路由：把url地址中可变的部分定义成参数项，根据不同的参数在组件中显示不同的内容

2.实现方法：在路由表中通过英文的冒号（:）来定义参数项

3.在组件中得到动态的路由参数：this.$route.params.参数名

---

一.vue2+axios+Express+MySQL实现前后端交互

1.后台：

（1）确定MySQL的表格：明确数据库 --- 数据表

（2）创建Express项目：mysql2、cors、Sequelize（ORM）、nodemon

（3）dao层（model、连接数据库、crud操作）----核心

        A.配置数据库

        B.建立模型

        C.CRUD操作

（4）service层（调用dao层）

（5）接口层（接口地址与service层的方法的映射）

（6）接口测试

2.前端

（1）创建vue2项目

（2）安装axios库

（3）创建组件：与后台进行交互实现增、删、查

二.vue2的前端路由（Vue-router）

1.路由：页面地址与组件之间的对应关系

2.路由方式：服务器端路由、前端路由

3.前端路由：在前端维护一组路由规则（地址和组件之间的对应关系），模式有两种：

（1）hash模式：类似于锚点。在地址前带有#

（2）History模式：由Html5使用，地址前不带#，地址之间用'/'分隔。需要服务器端的辅助

4.SPA：单页面使用（Single Page Application）

        一个Web网站只有一个html页面，所有组件的切换都在一个页面中完成。组件之间的切换是通过前端路由来实现的

5.前端路由的工作方式：

（1）用户点击页面中的路由链接

（2）URL的hash地址就会发生改变

（3）前端路由监听到了URL的改变

（4）前端路由会查找路由表，将hash地址对应的组件渲染到浏览器中

6.vue-