zoukankan      html  css  js  c++  java
  • 移动端路由的切换

    路由:

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

    前端路由

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

  • 相关阅读:
    迟到感悟
    让自己记住吧。
    hadoop 数据抽取
    指标导入常用函数
    linux shell中单引号、双引号、反引号、反斜杠的区别
    简单解说Linux命令输出与命令替换
    生成表结构
    ASP.NET MVC3在Visual Studio 2010中的变化
    主键自增归0
    解决包含已存在的php文件,但提示就是找不到的问题
  • 原文地址:https://www.cnblogs.com/wwwxxjsyy/p/10920061.html
Copyright © 2011-2022 走看看