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;
    }
  • 相关阅读:
    mysql索引的选择
    A、B两个线程交替打印1 -- 100
    dubbo服务暴露
    1
    java无锁化编程一:目录
    如何实现自定义同步组件
    服务器的性能监控
    关于shiro安全框架实现同一用户同一时刻仅可在一个地址登录的技术实现
    关于Spring的Quartz定时器设定
    JAVA之Mybatis基础入门二 -- 新增、更新、删除
  • 原文地址:https://www.cnblogs.com/LZXlzmmddtm/p/11657402.html
Copyright © 2011-2022 走看看