zoukankan      html  css  js  c++  java
  • vue路由传参

    在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、动态路由 流程 1、在定义路由的时候设置传递数据的key值 path:"/路由地址/:key1/:key2" key1 key2代表的数据的键值

        eg: path:"path:/login/:id"

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

        eg:<router-link to="/login/:12"><router-link>

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

    this.$router.params.id

    2、query传值 流程:

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

    简写:"name:路由地址,query:{id: ,name:}" 所谓的query传值其实就是我们常说的get传值的方式 通过?后面进行拼接

      eg:<router-link :to=“{name:"login",query:{sid:sid}”></router-link>

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

    3、路由解耦(只适合动态路由传值)

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

    2、接收的时候只需要通过props进行接收即可 query传值 和 params 传值的区别? 前者的参数可传可不传 后者的参数是必须要传递的 编程式导航 路由跳转的方式

    1、a标签跳转 影院

    2、组件 router-link

    3、编程式导航 通过js进行路由的跳转 this.$router.push 跳转 this.$router.back 后退 this.$router.forward 前进 this.$router.replace 替换

  • 相关阅读:
    Java实现 LeetCode 735 行星碰撞(栈)
    Java实现 LeetCode 735 行星碰撞(栈)
    Java实现 LeetCode 887 鸡蛋掉落(动态规划,谷歌面试题,蓝桥杯真题)
    Java实现 LeetCode 887 鸡蛋掉落(动态规划,谷歌面试题,蓝桥杯真题)
    Java实现 LeetCode 887 鸡蛋掉落(动态规划,谷歌面试题,蓝桥杯真题)
    Java实现 蓝桥杯算法提高 求最大值
    Java实现 蓝桥杯算法提高 求最大值
    Java实现 蓝桥杯算法提高 求最大值
    Python eval() 函数
    Python repr() 函数
  • 原文地址:https://www.cnblogs.com/manban/p/11117137.html
Copyright © 2011-2022 走看看