Vue3.0实现todolist之跳转路由（常用的push,ba

在home.vue里面
写一个button按钮
点击按钮 实现从首页跳转到about的界面

 <button @click="goto">跳转路由</button>

这里需要从vue-router引入一个useRouter 函数（新增概念，在vue3里面以use开头的函数为hooks函数）

import { useRouter } from "vue-router";

useRouter 函数会返回一个router对象 这是一个全局路由对象 里面会包含很多方法
可以打印出来看一下

//router是全局路由对象
    let router = useRouter();
  console.log(router);

这里可以看见我们最常用的push的方法
push函数里面可以直接传入跳转的路径

      router.push("/about");

也可以传入对象参数

 router.push({
        path: "/about",
      });

home.vue

<template>
  <div>
    <nav-header></nav-header>
    <nav-main></nav-main>
    <nav-footer></nav-footer>
    <button @click="goto">跳转路由</button>
  </div>
</template>

<script>

import { defineComponent, ref, computed } from "vue";

import { useStore } from "vuex";

import { useRouter } from "vue-router";

export default defineComponent({
  name: "Home",
  props: {},
  components: {
    
  },
  setup() {
    //router是全局路由对象
    let router = useRouter();
    console.log(router);

    let goto = () => {
      //跳转路由
      //push函数里面可以直接传入跳转的路径
      //router.push("/about");

      //back回退到上一页
      //forward:去到下一页
      //go（整数） 整数代表前进  负数代表后退

      router.push({
        path: "/about",
      });
    };

    return {
      goto,
    };
  },
});
</script>

<style></style>

在about里面 可以回到上一页

<template>
  <div>我是about界面</div>
  <div>
    <button @click="back">回到首页</button>
  </div>
</template>

<script>
import { defineComponent } from "vue";

import { useRouter } from "vue-router";

export default defineComponent({
  name: "About",

  setup() {
    //router是全局路由对象
    let router = useRouter();
    console.log(router);

    let back = () => {
      router.back();
    };

    return {
      back,
    };
  },
});
</script>

<style scoped></style>

这里的
router.back();
也可以使用
router.go(-1);

写一个开始页 Start

作为首页
在首页点击按钮 开始任务 会
跳转到home的界面

<template>
  <div>
    <button @click="start">开始任务</button>
  </div>
</template>

<script>
import { defineComponent } from "vue";

import { useRouter } from "vue-router";

export default defineComponent({
  name: "Start",

  setup() {
    //router是全局路由对象
    let router = useRouter();
    console.log(router);

    let start = () => {
      router.push({
        path: "/home",
      });
    };

    return {
      start,
    };
  },
});
</script>

<style scoped></style>

在router/index.js里面进行配置 将start配置成首页

import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from "vue-router";

// 1. 定义路由组件， 注意，这里一定要使用 文件的全名（包含文件后缀名）
import Start from "../views/Start.vue";
// import About from "../views/About.vue";
// import Home from "../views/Home.vue";

// 2. 定义路由配置
const routes = [
  {
    path: "/",
    name: "Start",
    component: Start,
  },
  {
    path: "/home",
    name: "Home",
    // component: Home,
    component: () => import("../views/Home.vue"),
  },
  {
    path: "/about",
    name: "About",
    //component: About,
    //按需引入：把component写成箭头函数的形式，然后return通过import的方式引入组件的相对路径
    //如果没有访问这个路径，就不会加载这个组件，实际上为了节约性能
    component: () => import("../views/About.vue"),
  },
];

// 3. 创建路由实例
const router = createRouter({
  // 4. 采用hash 模式
  //  history: createWebHashHistory(),
  // 采用 history 模式
  history: createWebHistory(),
  routes, // short for `routes: routes`
});

export default router;