• vue路由的四种传值


    第一种:props

    配置:

      组件内定义:

    props: ['id']

      路由映射配置,开启props:true :

           {
                path: '/user/:id',
                component: User,
                props: true
            }   

    跳转传参:

      1、标签跳转

    <router-link to="/user/1">第一个</router-link>

      2.函数式跳转:

    getDescribe(id) {
    // 直接调用$router.push 实现携带参数的跳转
            this.$router.push({
              path: `/describe/${id}`,
            })

    获取参数:

    <div>第一种传值props: {{ id }}</div>

    第二种:

    配置:(url显示在问号之前)

      路由映射配置:

    {
        path: '/user/:id',
        component: User
    },

    跳转传参:

      1、标签跳转

    <router-link to="/user/1">第二个</router-link>

      2.函数式跳转:

    getDescribe(id) {
    // 直接调用$router.push 实现携带参数的跳转
            this.$router.push({
              path: `/user/${id}`,
            })

    获取参数:

    <div>第二种传值$route.params.id: {{$route.params.id}}</div>

    第三种:(url不显示参数)

    配置:

      路由映射配置:

    {
        path: '/user',
        component: User
    },  

    跳转传参:

     1、标签跳转

    <router-link :to="{name:'c', params:{id:1}}">第四个</router-link>

     2.函数式跳转:

    getDescribe(id) {
    // 直接调用$router.push 实现携带参数的跳转
            this.$router.push({
              path: `/user`,
          params:{
            id:id
          }
            })

    获取参数:

    <div>第三种传值$route.params.id: {{$route.params.id}}</div>

    第四种:(url显示在?之后)

    配置:

      路由映射配置:

    {
        path: '/user',
        component: User
    },  

    跳转传参:

     1、标签跳转

    <router-link :to="{name:'c', query:{id:1}}">第四个</router-link>

     2.函数式跳转:

    getDescribe(id) {
    // 直接调用$router.push 实现携带参数的跳转
            this.$router.push({
              path: `/user`,
          query:{
            id:id
          }
            })

    获取参数:

    <div>第四种传值$route.query.id: {{$route.query.id}}</div>
  • 相关阅读:
    LM算法学习笔记(一)
    USB3.0剖析(锆石科技FPGA)
    USB2.0系列(锆石科技FPGA)
    异步FIFO
    总线时钟同步
    [已解决]Mac下Anaconda-Navigator闪退问题
    [已解决]Mac下运行spyder提示"Python 意外退出"
    博客园账号被盗
    unhandled event loop exception解决方案
    初识ListView
  • 原文地址:https://www.cnblogs.com/likewpp/p/10827320.html
Copyright © 2020-2023  润新知