您的当前位置:首页正文

vue学习笔记之路由相关

2023-08-18 来源:帮我找美食网

一:路由的介绍:

 二:Vue Router:

2.1:介绍:

2.2:使用:

2.2.1:基础五步:

(版本对应:vue2:vuerouter3.x   vuex3.x        vue3:vue router4.x  vuex4.x)

2.2.2:核心两步:

 2.3:小结:

 三:组件的存放目录问题:

3.1:组件分类:

3.2:规范:

3.3:小结:

四:路由的封装抽离:

 

 4.1:案例:

1.main.js中只导入了router对象:

2.router文件夹下的index.js中写路由相关:

 五:router-link标签:

5.1:简介:

 5.2:小结:

5.3:router-link标签自动添加的两个类名:

5.3.1:两个类名的区别:

 5.3.2:自定义匹配的类名:

 六:声明式导航(router-link)-跳转传参:

(声明式导航---->router-link标签)

6.1:查询参数传参:

 6.2:动态路由传参:

6.3:小结:

 

6.4:动态路由参数可选符:

 七:vue路由的重定向,404:

7.1:重定向:

 7.2:找不到页面提示404:

八:vue路由的模式设置: 

 

九:编程式导航-跳转: 

(编程式导航---->使用js代码进行跳转) 

9.1:path路径跳转:

9.1.1:传参与接收参数之query方式:

 9.1.2:传参与接收参数之动态路由方式:

9.2:name命名路由跳转:

 9.2.1:传参与接收参数之query方式:

 9.2.2:传参与接收参数之动态路由方式:

因篇幅问题不能全部显示,请点此查看更多更全内容

热门图文

Top