zoukankan      html  css  js  c++  java
  • Vue基础笔记4

    路由传参

    第一种

    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
    
  • 相关阅读:
    matlab2016b
    【ccf- csp201509-4】高速公路
    【ccf- csp201412-2】z字形扫描
    【ccf-csp201512-5】矩阵
    【动态规划】矩阵连乘分析
    JAVA环境搭建
    【离散数学2】代数系统趣题
    给文本编辑框绑定变量
    清空文本框SetDlgItemText(IDC_TXTXT,NULL);
    有关SetTimer函数的用法
  • 原文地址:https://www.cnblogs.com/plf-Jack/p/11444569.html
Copyright © 2011-2022 走看看