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
    """
    
  • 相关阅读:
    005.SQLServer AlwaysOn可用性组高可用简介
    004.Windows Server 故障转移群集 (WSFC)简介
    003.SQLServer数据库镜像高可用部署
    附008.Kubernetes TLS证书介绍及创建
    附007.Kubernetes ABAC授权
    附006.Kubernetes RBAC授权
    附005.Kubernetes身份认证
    附004.Kubernetes Dashboard简介及使用
    附003.Kubeadm部署Kubernetes
    附002.Minikube介绍及使用
  • 原文地址:https://www.cnblogs.com/pythonywy/p/11440556.html
Copyright © 2011-2022 走看看