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