zoukankan      html  css  js  c++  java
  • 10_11 vue路由跳转

    一。路由跳转

      在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;
    }
  • 相关阅读:
    POJ 2342.Anniversary party-树形dp
    Codeforces Round #363 (Div. 2) A、B、C
    Codeforces Beta Round #17 D.Notepad 指数循环节
    hdu 5920 Wool 思路
    hdu 5719 Arrange 贪心
    hdu 5718 Oracle 高精度
    hiho #1332 : 简单计算器 栈+递归
    UESTC 1074 秋实大哥搞算数 栈模拟
    cdoj 1329 卿学姐与魔法 优先队列
    cdoj 1324 卿学姐与公主 线段树裸题
  • 原文地址:https://www.cnblogs.com/LZXlzmmddtm/p/11657402.html
Copyright © 2011-2022 走看看