• 移动端路由的切换


    路由:

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

    前端路由

      前端路由不会经过服务器  根据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    替换

  • 相关阅读:
    pycharm中启动Django方法
    Python ——selenium报错 'chromedriver.exe' executable needs to be in PATH
    软件测试
    C#&.Net干货分享- 构建PrinterHelper直接调用打印机相关操作
    C#&.Net干货分享- iTextSharp导出数据源到PDF
    C#&.Net干货分享-构建Aocr_ImageHelper读取图片文字做解析
    C#&.Net干货分享-构建后台自动定时任务的源码
    SQL Server清理数据库日志的脚本-干货
    SQL Server通过函数把逗号分隔的字符串拆分成数据列表的脚本-干货
    SQL Server通过定义函数返回字段数据列表模板-干货
  • 原文地址:https://www.cnblogs.com/wwwxxjsyy/p/10920061.html
Copyright © 2020-2023  润新知