Vue-CLI项目中路由传参的方式详解

一.标签传参方式：<router-link></router-link>

第一种

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
"""

总结

以上所述是小编给大家介绍的Vue-CLI项目中路由传参的方式详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • 详解在vue-cli中使用路由

    详解在vue-cli中使用路由

    1.首先npm中是否有vue-router 一般在vue-cli的时候就已经下载好了依赖包了 2.使用vue的话正常的需要涉及这几个文件 demo/src/router/index.js import Vue from 'vue' import Router from 'vue-router' import Hello from '../components/Hello'//首页 import Test from '../components/test'//需要跳转的页面 给组件重新命名 Vue

  • 基于vue cli 通过命令行传参实现多环境配置

    大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻烦了. 如果可以像下面这样切换环境就方便了 npm run serve //默认本地开发环境 npm run serve -sit //本地开发中使用sit环境 npm run serve -uat //本地开发中使用uat环境 npm run build //默认打包后使用生产环境 npm run build -local //打包后使用本地环境 npm

  • vue3.0 CLI - 3.2 路由的初级使用教程

    我的 github 地址 -vue3.0Study- 阶段学习成果都会建立分支. ========================== 动态路由 在路由某部分里加入[ : ],就成为动态路由如:/user/:id/,那么路由导航,并不是  /user/id/ 而是 /user/666/. 显然这个 id 能被获取,在组件中使用.通过 this.$route.params 获取. this 是当前组件,$route 是路由对象,params 是一个对象字面量 { id:666 }. $route

  • vue-cli 默认路由再子路由选中下的选中状态问题及解决代码

    vue-cli是Vue.js官方脚手架命令行工具,我们可以用它快速搭建Vue.js项目,vue-cli最主要的功能就是初始化项目,既可以使用官方模板,也可以使用自定义模板生成项目,而且从2.8.0版本开始,vue-cli新增了build命令,能让你零配置启动一个Vue.js应用. 因项目需求,需要在默认路由下面的两个子路由进行切换,当开始以为不就是路由切换?so easy!就看一下遇到的问题吧! {path: '/',component: resolve => require(['@/compo

  • vue-cli实现多页面多路由的示例代码

    vue-cli实现多页面多路由的示例代码

    项目下载地址 vue-cli多页面多路由项目示例:vue+webpack+vue-router+vuex+mock+axios Usage This is a project template for vue-cli. github上找到某大神的一个基于vue-cli模板的vueAdmin后台管理的模板,根据项目需求改成一个多页面多路由的vue项目. PC端:后台管理页面,单独的页面入口,单独的路由. 移动端:业务展示页面,单独的页面入口,单独的路由. 踩了无数的坑,终于是初见效果了,随后继续优

  • 基于vue-cli 路由 实现类似tab切换效果（vue 2.0）

    1,更改main.js 2,在App.vue中,写入两个跳转链接(router-link),分别跳转到"home""About" (home.About即分别是两个组件) ----其中,为什么要使用<router-link></router-link>, 请移步:http://router.vuejs.org/zh-cn/api/router-link.html ----router-view路由视图(必须) ----css可以使用外部样式

  • 详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用

    详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用

    windows下vue-cli及webpack 构建网站(一)环境安装 windows下vue-cli及webpack 构建网站(二)导入bootstrap样式 windows下vue-cli及webpack 构建网站(三)使用组件 1.本篇文章是建立在以上三篇文章的基础上的. 2.安装 vue-router 插件,运行cmd进入到项目目录下面,运行以下命令: cnpm install vue-router --save-dev 3.在src文件夹下面新建一个文件夹page用于存放模板文件,然后

  • 在vue-cli脚手架中配置一个vue-router前端路由

    前言 这篇文章给大家讲解的是在vue-cli脚手架中如何配置vue-router前端路由的相关内容,分享出来供打击参考学习,下面来一起看看详细的介绍: 首先你需要一个main.js文件 //然后引入vue-router import VueRouter from 'vue-router'; //使用路由 Vue.use(VueRouter); //当然如果需要有组件进来的时候也是需要引入的 import Home from '../components/Home.vue'; import New

  • Vue-CLI项目中路由传参的方式详解

    一.标签传参方式:<router-link></router-link> 第一种 router.js { path: '/course/detail/:pk', name: 'course-detail', component: CourseDetail } 传递层 <!-- card的内容 { id: 1, bgColor: 'red', title: 'Python基础' } --> <router-link :to="`/course/detail

  • AngularJS 中ui-view传参的实例详解

    Angular路由传参 首页 <!DOCTYPE html> <html ng-app="app"> <head> <title>路由传参</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" c

  • vue中路由传参以及跨组件传参详解

    路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$router.go(1); <router-link to="/course">课程页</router-link> <router-link :to="{name: 'course'}">课程页</router-link> 路由

  • vue动态路由配置及路由传参的方式

    动态路由: 当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据 这就要用到动态路由跟路由传参了! 首先我们来了解下router-link这个组件: 简单来说,它是个导航器,利用to属性导航到目标组件,并且在渲染的时候会自动生成一个a标签,当然官方也有说明,加个tag标签属性就可以渲染不同的标签,可以浏览器端查看到 并且当一个导航器被激活的时候,会自动加上一个css的激活样式,可以全局在路

  • vue项目中使用tinymce编辑器的步骤详解

    Tinymce富文本也是一款很流行编辑器 把文件放在static下,然后在index.html文件中引入这个文件 <script src="static/tinymce/tinymce.min.js"></script> <tinymce :height=200 ref="editor" v-model="editForm.fdcNote"></tinymce> 在其他子文件中引入这个 import

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • 对vue下点击事件传参和不传参的区别详解

    如下所示: <div id = 'app'> <p><button @click = 'test_click1'>{{btn_text1}}</button></p> <br> <p><button @click = 'test_click2("123")'>{{btn_text2}}</button></p> </div> <script src=

  • vue2.0项目实现路由跳转的方法详解

    一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入vue-ruoter: 二.应用 1.路径配置(页面跳转): 方法一:如果切换的页面不多,可以直接在main.js文件内配置. 方法二:如果切换的页面较多,可以建一个专门用于路由的js文件,里面配置路径. 1)router.js配置文件 2)main.js里引入router.js路由文件 2.组件里调

  • Android项目中实体类entity的作用详解

    估计很多入门安卓的朋友对entity很困惑,为什么要写实体类?有什么用?写来干什么? 对于实体类的理解我入门的时候也是困惑了好久,后面用多了才慢慢理解,这篇博客就当复习和笔记. Java中entity(实体类)的写法规范 在日常的Java项目开发中,entity(实体类)是必不可少的,它们一般都有很多的属性,并有相应的setter和getter方法.entity(实体类)的作用一般是和数据表做映射.所以快速写出规范的entity(实体类)是java开发中一项必不可少的技能. 在项目中写实体类一般

随机推荐