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
    """
    
  • 相关阅读:
    jQuery实现radio第一次点击选中第二次点击取消功能(转)
    好用的文件下载类
    Windows获取远程Linux局域网内的mysql连接
    linux通过端口号查找程序执行路径
    linux几个命令
    java判断是移动端还是pc端
    jsp传给java属性,java生成json串,方便以后取出来
    如何在线程中获取spring 管理的bean
    [DeploymentService:290066]Error occurred while downloading files from admin server for deployment request "0". Underlying error is: "null"
    double,失去精度
  • 原文地址:https://www.cnblogs.com/pythonywy/p/11440556.html
Copyright © 2011-2022 走看看