day67_10_11
一。路由跳转
在vue中,路由条状有很多种。
其中有点击事件触发的路由跳转:
this.$router.push('/course');
和通过名字跳转的:
this.$router.push({name: course});
对history操作的go语法,可以调节回退页面:
this.$router.go(-1);
this.$router.go(1);
在router-link中,也有可以跳转路由的方法:
<router-link to="/course">课程页</router-link>
跳转字典对象的:
<router-link :to="{name: 'course'}">课程页</router-link>
二。路由传参。
如果需要传递参数给各个页面。反馈不同的页面,需要传毒有参路由:
第一种。
通过:id的有参参数传递给路由:
router.js
routes: [
// ...
{
path: '/course/:id/detail',
name: 'course-detail',
component: CourseDetail
},
]
跳转。vue
<template>
<router-link :to="`/course/${course.id}/detail`">{{ course.name }}</router-link>
</template>
<script>
// ...
goDetail() {
this.$router.push(`/course/${this.course.id}/detail`);
}
</script>
接受vue:
created() {
let id = this.$route.params.id;
}
第二种
在push种有params传递参数,也可以通过query传递参数,这里通过router-link传递字典对象。
router.js
routes: [
// ...
{
path: '/course/detail',
name: 'course-detail',
component: CourseDetail
},
]
跳转。vue
<template>
<router-link :to="{
name: 'course-detail',
query: {id: course.id}
}">{{ course.name }}</router-link>
</template>
<script>
// ...
goDetail() {
this.$router.push({
name: 'course-detail',
query: {
id: this.course.id
}
});
}
</script>
接受。vue
created() {
let id = this.$route.query.id;
}
day67_10_11的更多相关文章
随机推荐
- Day6 - Python基础6 模块shelve、xml、re、subprocess、pymysql
本节目录: 1.shelve模块 2.xml模块 3.re模块 4.subprocess模块 5.logging模块 6.pymysql 1.shelve 模块 shelve模块是一个简单的k,v将内 ...
- 2019-2020-1 20199305《Linux内核原理与分析》第二周作业
C程序的反汇编 (一)实验截图 复制所需要的C程序到"剪切板" 在虚拟机环境下粘贴过来 接下来进行反汇编,通过输入gcc -S -o main.s main.c -m32得到32位 ...
- linux,xshell命令
一. linux 1.Linux发行版 <1> 常见的发行版本如下: Ubuntu Redhat Fedora openSUSE Linux Mint Debian Manjaro M ...
- Codeforces Round #599 (Div. 1) C. Sum Balance 图论 dp
C. Sum Balance Ujan has a lot of numbers in his boxes. He likes order and balance, so he decided to ...
- flag 履行我的flag
以后数组开小就不吃饭!!!!!! 上午考试不吃午饭 下午考试不吃晚饭 晚上考试不吃早饭 我以后还能吃饭吗 11.12距离csp-s还有2天,我的数组开小了,履行承诺,不吃饭了
- js获取url参数值的方法总结
1.方式一:通过字符串截取的方式获取参数值: 1).函数一:获取URL中的参数名及参数值的集合 /** * [获取URL中的参数名及参数值的集合] * 示例URL:http://htmlJsTest/ ...
- Java 程序员应在2019年学习的10条面向对象(OOP)设计原则
面向对象的设计原则 是 OOP 编程的核心,但是我看到大多数 Java 程序员都在追求诸如 Singleton 模式,Decorator 模式或 Observer 模式之类的设计模式,而对学习面向 ...
- 简单node服务器demo,麻雀虽小,五脏俱全
//本服务器要实现的功能如下: //1.静态资源服务器(能读取静态资源) //2.能接收get请求,并能处理参数 //3.能接收post请求,并能处理参数 const http = require(' ...
- 【LOJ#573】【LNR#2】单枪匹马(线段树)
[LOJ#573][LNR#2]单枪匹马(线段树) 题面 LOJ 题解 考虑拿线段树维护这个值,现在的问题就是左右怎么合并,那么就假设最右侧进来的那个分数是\(\frac{x}{y}\)的形式,那么就 ...
- Object(Asp.NET核心机制内置对象汇总)
ASP.NET有个大佬,HttpContext(在.Net Core中依然是它)Http请求的上下文,任何一个环节都是需要HttpContext的,需要的参数信息,处理的中间结果,最终的结果,都是放在 ...