zoukankan      html  css  js  c++  java
  • 【1118 | Day61】Vue-CLI项目中路由传参

    第一种

    router.js
    {
        path: '/course/detail/:pk',
        name: 'course-detail',
        component: CourseDetail
    }
    
    传递层
    <!-- card的内容
    {
        id: 1,
        bgColor: 'red',
        title: 'Python基础'
    }
    -->
    <router-link :to="`/course/detail/${card.id}`">详情页</router-link>
    
    接收层
    let id = this.$route.params.pk
    
    演变体
    """
    {
        path: '/course/:pk/:name/detail',
        name: 'course-detail',
        component: CourseDetail
    }
    
    <router-link :to="`/course/${card.id}/${card.title}/detail`">详情页</router-link>
    
    let id = this.$route.params.pk
    let title = this.$route.params.name
    """
    

    第二种

    router.js
    {
        // 浏览器链接显示:/course/detail,注:课程id是通过数据包方式传递
        path: '/course/detail',
        name: 'course-detail',
        component: CourseDetail
    }
    
    传递层
    <!-- card的内容
    {
        id: 1,
        bgColor: 'red',
        title: 'Python基础'
    }
    -->
    <router-link :to="{
                      name: 'course-detail',
                      params: {pk: card.id}
                      }">详情页</router-link>
    
    接收层
    let id = this.$route.params.pk
    

    第三种

    router.js
    {
        // 浏览器链接显示:/course/detail?pk=1,注:课程id是通过路由拼接方式传递
        path: '/course/detail',
        name: 'course-detail',
        component: CourseDetail
    }
    
    传递层
    <!-- card的内容
    {
        id: 1,
        bgColor: 'red',
        title: 'Python基础'
    }
    -->
    <router-link :to="{
                      name: 'course-detail',
                      query: {pk: card.id}
                      }">详情页</router-link>
    
    接收层
    let id = this.$route.query.pk
    

    二.逻辑传参:this.$router

    第一种

    """
    路由:
    path: '/course/detail/:pk'
    
    跳转:id是存放课程id的变量
    this.$router.push(`/course/detail/${id}`)
    
    接收:
    let id = this.$route.params.pk
    """
    

    第二种

    """
    路由:
    path: '/course/detail'
    
    跳转:id是存放课程id的变量
    this.$router.push({
                        'name': 'course-detail',
                        params: {pk: id}
                    });
    
    接收:
    let id = this.$route.params.pk
    """
    

    第三种

    """
    路由:
    path: '/course/detail'
    
    跳转:id是存放课程id的变量
    this.$router.push({
                        'name': 'course-detail',
                        query: {pk: id}
                    });
    
    接收:
    let id = this.$route.query.pk
    """
    
  • 相关阅读:
    java基础-集合笔记
    Spring工具类
    XStream的基本使用
    java之路径问题
    Vue 动态组件渲染问题分析
    watch案例解析(element-ui el-select 无法选中问题剖析)
    v-if案例解析(element-ui form-item 结合 v-if 动态生成rule规则表单元素,表单无法验证问题剖析 )
    Vue 虚拟Dom 及 部分生命周期初探
    Android仿苹果版QQ下拉刷新实现(二) ——贝塞尔曲线开发"鼻涕"下拉粘连效果
    AngularJs(SPA)单页面SEO以及百度统计应用(下)
  • 原文地址:https://www.cnblogs.com/fxyadela/p/11885774.html
Copyright © 2011-2022 走看看