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