zoukankan      html  css  js  c++  java
  • vue路由

    路由跳转

    this.$router.push('/course');
    this.$router.push({name: course});
    this.$router.go(-1);
    this.$router.go(1);
    <router-link to="/course">课程页</router-link>
    <router-link :to="{name: 'course'}">课程页</router-link>
    

    路由传参

    第一种

    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;
    }
    

    第二种

    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;
    }
  • 相关阅读:
    移动端事件
    移动端的三种布局
    bootstrap自定义——栅格列数修改
    less文件的运行
    lessc的安装
    nodejs的安装
    jquery插件之jquery-ui
    指定网卡进行ping操作
    汇编语言从入门到精通-4标识符和表达式
    汇编语言从入门到精通-3操作数的寻址方式
  • 原文地址:https://www.cnblogs.com/Sunbreaker/p/11656133.html
Copyright © 2011-2022 走看看