一。路由跳转

  在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的更多相关文章

随机推荐

  1. 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将内 ...

  2. 2019-2020-1 20199305《Linux内核原理与分析》第二周作业

    C程序的反汇编 (一)实验截图 复制所需要的C程序到"剪切板" 在虚拟机环境下粘贴过来 接下来进行反汇编,通过输入gcc -S -o main.s main.c -m32得到32位 ...

  3. linux,xshell命令

     一. linux  1.Linux发行版 <1> 常见的发行版本如下: Ubuntu Redhat Fedora openSUSE Linux Mint Debian Manjaro M ...

  4. 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 ...

  5. flag 履行我的flag

    以后数组开小就不吃饭!!!!!! 上午考试不吃午饭 下午考试不吃晚饭 晚上考试不吃早饭 我以后还能吃饭吗 11.12距离csp-s还有2天,我的数组开小了,履行承诺,不吃饭了

  6. js获取url参数值的方法总结

    1.方式一:通过字符串截取的方式获取参数值: 1).函数一:获取URL中的参数名及参数值的集合 /** * [获取URL中的参数名及参数值的集合] * 示例URL:http://htmlJsTest/ ...

  7. Java 程序员应在2019年学习的10条面向对象(OOP)设计原则

    面向对象的设计原则 是 OOP 编程的核心,但是我看到大多数 Java 程序员都在追求诸如 Singleton 模式,Decorator 模式或 O​​bserver 模式之类的设计模式,而对学习面向 ...

  8. 简单node服务器demo,麻雀虽小,五脏俱全

    //本服务器要实现的功能如下: //1.静态资源服务器(能读取静态资源) //2.能接收get请求,并能处理参数 //3.能接收post请求,并能处理参数 const http = require(' ...

  9. 【LOJ#573】【LNR#2】单枪匹马(线段树)

    [LOJ#573][LNR#2]单枪匹马(线段树) 题面 LOJ 题解 考虑拿线段树维护这个值,现在的问题就是左右怎么合并,那么就假设最右侧进来的那个分数是\(\frac{x}{y}\)的形式,那么就 ...

  10. Object(Asp.NET核心机制内置对象汇总)

    ASP.NET有个大佬,HttpContext(在.Net Core中依然是它)Http请求的上下文,任何一个环节都是需要HttpContext的,需要的参数信息,处理的中间结果,最终的结果,都是放在 ...