Vue-router的三种传参方式
第一种传递参数:name传参
两步完成name传参并显示在模板中;
第一在router/index.js中配置name属性,
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
]
第二步在src/App.vue接收
- {{ $route.name }}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
第二种参数传递方式 通过<router-link>标签中的to传递
首先在src/App.vue中添加
- <router-link :to="{name:'hello',params:{userName:'冬天'}}">hello</router-link>
然后在router/index.js中添加name
{
path: '/hello',
name: 'hello',
component: hello,
alias: '/dongtian' //别名
},
最后在hello.vue页面接收
<h2>{{ $route.params.userName}}</h2>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
第三种 利用rul传递参数
首先在router/index.js路由中以冒号的形式传递参数,配置路由如下
{
path: '/params/:Id(\\d+)/:title', //只能是数字
component: params
}
然后在params模块利用$route接收参数
- <p>Id: {{ $route.params.Id}}</p>
- <p>title: {{ $route.params.title}}</p>
最后在src/App.vue模块中的 <router-link>标签中利用rul传值
<router-link to="/params/189/tianshi">params</router-link>
Vue-router的三种传参方式的更多相关文章
- vue路由router的三种传参方式
方法三: 传参页面传递参数方式: this.$router.push({ path: 'indexTwoDetails', query: { "id": id } }) 接受参数页 ...
- 浅谈C++三种传参方式
浅谈C++三种传参方式 C++给函数传参中,主要有三种方式:分别是值传递.指针传递和引用传递. 下面通过讲解和实例来说明三种方式的区别. 值传递 我们都知道,在函数定义括号中的参数是形参,是给函数内专 ...
- vue的三种传参方式
<template> <div> <router-link :to="{'name':'x',params:{'type':'users'}}"> ...
- vector作为参数的三种传参方式
c++中常用的vector容器作为参数时,有三种传参方式,分别如下(为说明问题,用二维vector): function1(std::vector<std::vector<int> ...
- vector做形参时的三种传参方式
vector在做形参的时候传参的方式和普通的变量是一样的,要么传值.要么传引用.要么传指针. 现在分别定义三个以vector为形参的函数: (1) fun1(vector <int> v) ...
- c# 三种传参方式 in,out,ref
in:默认方式,传值不返回 out:不传值 但是会返回新值给予传参对象 ref:传存储地址,所以传参前必须赋值初始化,传值后的运算结果直接作用在传参上 Out和ref的效果差不多
- PHP四种传参方式
test1界面: <html> <head> <title>testPHP</title> <meta http-equiv = "co ...
- C++学习3--编程基础(vector、string、三种传参)
知识点学习 Vector容器 vector是C++标准程序库中的一个类,其定义于头文件中,与其他STL组件一样,ventor属于STD名称空间: ventor是C++标准程序库里最基本的容器,设计之初 ...
- Vue中router两种传参方式
Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...
随机推荐
- 大型网站架构演进(6)使用NoSQL和搜索引擎
随着网站业务越来越复杂,对数据存储和检索的需求也越来越复杂,网站需要采用一些非关系型数据库技术(即NoSQL)和非数据库查询技术如搜索引擎.NoSQL数据库一般使用MongoDb,搜索引擎一般使用El ...
- EntityFramework实体默认值遇到Oracle自增主键
1. Oracle实现主键自动增长 一般我们在Oracle实现主键自动增长,通常通过序列加触发器实现. 定义序列用于获取递增数字 CREATE SEQUENCE 序列名 [INCREMENT BY n ...
- 五、RemoteViews
RemoteViews表示的是一个View结构,它可以在其他进程中显示.RemoteViews在Android中的使用场景有两种:通知栏和桌面小部件. 1.RemoteViews的应用 RemoteV ...
- Docker入门笔记
Docker入门笔记 随笔记录初学Docker遇到的问题, 以免下次再犯. 本机系统Ubuntu18.04 安装 Docker有2个版本 Community Edition (CE) 社区版(免费) ...
- c/c++ 继承与多态 容器与继承3
c/c++ 继承与多态 容器与继承2 巩固了容器里放智能指针的用法,但是有个问题,对于使用Basket类的用户来说,必须添加的是智能指针,如果能直接添加一个普通的类的对象的话,用起来就方便的多了,所以 ...
- 局部敏感哈希(LSH)之simhash和minhash
minhash 1. 把文档A分词形成分词向量L 2. 使用K个hash函数,然后每个hash将L里面的分词分别进行hash,然后得到K个被hash过的集合 3. 分别得到K个集合中的最小hash,然 ...
- JavaScript数据类型之null和undeined
null null是JavaScrpt的关键字,表示一个特殊值,常用于描述"空值".对null执行typeof运算将返回字符串"object". undefin ...
- 滑动窗口最大值的golang实现
给定一个数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧.你只可以看到在滑动窗口 k 内的数字.滑动窗口每次只向右移动一位. 返回滑动窗口最大值 输入: nums = [, ...
- 周末班:Python基础之面向对象基础
面向对象基础 面向对象和面向过程 编程思想是什么,就是用代码解决现实生活中问题的思路. 面向过程 核心点在过程二字,过程指的是解决问题的步骤,说白了就是先做什么再干什么.这种解决问题的思路就好比是工厂 ...
- virtualenvwrapper 虚拟环境的使用 和 python 安装源的更改
virtualenvwrapper 虚拟环境的使用 鉴于virtualenv不便于对虚拟环境集中管理,所以推荐直接使用virtualenvwrapper. virtualenvwrapper提供了一系 ...