Vue路由跳转与接收参数

最新推荐文章于 2023-11-02 14:26:18 发布

Tryharder1028

最新推荐文章于 2023-11-02 14:26:18 发布

阅读量254

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/cutey_/article/details/129534219

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章介绍了在Vue.js中进行路由跳转的两种方式，通过`router-link`标签和`this.$router.push()`方法，同时详细阐述了如何传递参数。此外，还讲解了ES6的模板字符串及其在创建动态函数中的应用，包括两种不同的使用示例。文章最后提到了URL路径中动态参数的表示方式，如课程计划ID和报名ID。

摘要由CSDN通过智能技术生成

一、路由跳转四种方式 (带参数)
router-link
传递 <router-link :to="{ path: '/传递的页面名', query: {id: item.id }, }"></router-link>
接收页面
在这里插入图片描述

2) this.$router.push() (函数里面调用)

es6模板字符串
模板字符串中嵌入变量，要将变量名写在${}之中
模板字符串使用反单引号(backquote) ``


// 写法一
var str = 'return ' + '`Hello ${name}!`';
var func = new Function('name', str);
func('Amy');    // "Hello Amy!"
 
// 写法二
var str = '(name) => `Hello ${name}!`';
var func = eval.call(null, str);
func('Amy');    // "Hello Amy!"

在这里插入图片描述