Vue2前端路由(vue-router的使用)

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

1、后台：

（1）确定MySQL的表格：明确数据库 （mvc） —- 数据表(ssm_book)

（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）

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

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

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

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

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

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

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

（1）vue-router的版本：

A、vue2中使用vue-router3：npm install vue-router@3

B、vue3中使用vue-router4

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

A、VueRouter：路由器类（路由器组件），用来维护路由表（URL地址与组件的映射）

B、router-link：路由链接组件，本质就是标签，路由请求的用户接口

C、router-view：路由视图组件（路由出口），主要负责渲染组件

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）嵌套路由：在组件中嵌套显示组件（通过路由实现组件的嵌套显示）

A、创建两个组件：Tab1、Tab2 里面写上内容（标签），

B、在About.vue组件中创建路由链接和路由视图

C、在路由表中给’/about’路径添加children属性，设置子路由规则

d 通过导入的方式把tab1和tab2中的内容导到about里面，然后再把about导入到app中

三、动态路由

第一种方法：

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

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

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

强调：index文件中冒号后面的id和movie文件中params.id中的id是对应的（就是说index中写的是id，movie中就要对应的写id.）

4、在app中导入展示组件

1. 测试：

第二种方法：

A.在index文件，添加属性props：（传值属性，父传子）

B.用父传子的方法把组件传过来。

props:["id"],对应的是index中冒号后面的id

跟第一种方式出来的效果是一样的，喜欢用那种用那种，个人感觉第一种比较方便