移动端路由的切换

Posted 2021-12-04 wwwxxjsyy

路由：

　　根据用户请求路径的不同返回不同的页面或者数据

前端路由

　　前端路由不会经过服务器  根据hash值一个变化切换不同的页面  路由切换页面的时候页面是不会刷新的

　　单页面开发：SPA

　　后端路由　　接口

在vue中使用插件的步骤

　　1，引入Vue

　　2，引入插件

　　3，使用插件　　Vue。use（）

当路由配置成功以后Vue中就会多了两个内置组件

　　<router-view></router-view>------当路径匹配成功以后  router-view用来显示对应的组件

　　<router-link></router-link>

　　　　1，做路由的跳转　　必须要添加一个属性 to：跳转的路径

　　　　2，初次之外 router-link身上还会有一个tag属性　 指定router-link渲染成指定的标签

路由的配置

　　mode：路由的形成　　hash路由　　history路由

　　routes:【】每一个路由页面的配置项

　　routes中的配置项

　　path：“路径匹配的路径”

　

　component：当路径匹配成功需要渲染的组件

　　 redirect：重定向

　　children：路由嵌套的配置项　　这个属性和routes一样

　　　　路由嵌套中path只需要写路径的名称即可

　　name：当前路由的名称

　　props：路由解耦

 路由传值的方式

　　一，动态路由

　　流程：

　　1，在定义路由的时候设置传递数据的key值  path：“/路由地址/：key1/key2”  key1 key2代表的数据的健值

　　2，在做路由跳转的时候定义传递的数据  to=“/路由地址/参数1/参数2”

　　3，在需要接收信息的组件内部通过this.$route.params进行接收

　　二，query传值

　　流程：

 　　1，通过query的方式进行数据的传参  key=val&key=val

　　所谓的query传值其实就是我们常说的get传值的方式  通过？后面进行字符串拼接

　　2，接收的时候通过this.$route.query进行接收

　　三，路由解耦（只是适合动态路由传值）

　　1，在定义路由的时候添加一个属性  props：true

　　2，接收的时候只需要通过props进行接收即可

query传值 和 params传值的区别？
　　前者的参数可穿不可传

　　后者的参数是必须要传的

编程式导航

　　路由跳转的方式

　　1，a标签跳转  <a href="#/cinema>影院</a>

　　2，组件router-link

　　3，编程式导航 通过js进行路由的跳转

　　this.$router.push   跳转

　　thsi.$router.back  后退

　　thsi.$router.forward  前进

　　this.$router.replace    替换