zoukankan      html  css  js  c++  java
  • Vue-CLI项目中路由传参

    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
    """
    
  • 相关阅读:
    MapGuide 资源
    mac 安装brew
    mysql 设置外键约束SET FOREIGN_KEY_CHECKS=1
    一文深入讲解redis和couchbase的区别
    mac 显示 sh3.2# 的
    DBA整理的万字详解MySQL性能优化,值得收藏!
    redis和couchbase的比较
    && 运算符的使用
    freeotp 安装及使用过程
    Couchbase vs Redis,究竟哪个更胜一筹?
  • 原文地址:https://www.cnblogs.com/pythonywy/p/11440556.html
Copyright © 2011-2022 走看看