继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【金秋打卡】第15天-vue3.0实现todolist

max666
关注TA
已关注
手记 21
粉丝 1
获赞 0

第一模块

课程名称:vue3.0实现todolist

章节名称:

  • 4-2 实现todolist之跳转路由

讲师姓名:五月的夏天

第二模块

课程内容(概述)

1、讲解如何实现路由跳转,router.pushrouter.back(),router.go()如何使用

第三模块

介绍

Vue 的单页面应用是基于路由+组件的形式,路由用于设定访问路径,并将路径与组件映射起来。这种形式相对于 a标签超链来说不会重新加载页面,而是在同一个页面中进行路由跳转。如何跳转?

配置

App.vue 是项目的主组件,可以理解为项目的入口页面,所有页面都在 App.vue 页之下进行切换。接下来我们要来修改 App.vue ,以适应我们添加的 Router 功能

<template>
    <div>
        <!-- 路由视图容器 -->
        <router-view />
    </div>
</template>

views目录下新建About.vueHome.vue文件

<!-- About.vue -->
<template>
    <div>
        --------------------------
        About
        <button type="button" @click="onRet">返回上一页</button>
        --------------------------
    </div>
</template>
<script>
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
export default defineComponent({
    name: 'About',
    setup() {
        const router = useRouter()
        const onRet = () => {
            // 返回上一页
            router.back()
        }
        return {
            onRet
        }
    }
})
</script>
<!-- Home.vue -->
<template>
    <div>
        <button @click="toAbout">跳转关于</button>
    </div>
</template>
<script>
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
export default defineComponent({
    name: 'Home',
    setup() {
        const router = useRouter()
        const toAbout = () => {
            // 跳转路由
            router.push({ path: '/about' })
        }
        return {
            toAbout
        }
    }
})
</script>

路由文件配置如下

import { createWebHistory, createRouter } from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

运行项目,点击【跳转关于】按钮即可实现路由跳转

第四模块

学习截图

图片描述
图片描述

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP