Vue入门（二十四）

todolist之基本结构——实现todolist之跳转路由

开始编写代码

        准备好上一讲的代码，打开 routes 文件夹下的 HomeView.vue 文件

跳转路由按钮

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

引入vue-router

	import {
		useRouter
	} from 'vue-router'

useRouter

官网说明：返回 router 实例。相当于在模板中使用 $router。必须在 setup() 中调用。

	export default defineComponent({
		name: 'HomeView', // 组件名称
		// 定义子组件
		components: {
			// NavHeader: NavHeader 键和名相等时可简写为 NavHeader
			NavHeader,
			NavMain,
			NavFooter
		},
		setup() {
			// router是全局路由对象
			let router = useRouter()
			console.log(router);
			let goto = () => {

			}
			return {
				goto
			}
		}
	})

跳转路由

	export default defineComponent({
		name: 'HomeView', // 组件名称
		// 定义子组件
		components: {
			// NavHeader: NavHeader 键和名相等时可简写为 NavHeader
			NavHeader,
			NavMain,
			NavFooter
		},
		setup() {
			// router是全局路由对象
			let router = useRouter()
			// console.log(router);
			let goto = () => {
				// 跳转路由
				// push函数可以直接传入跳转的路径
				// router.push('/about')
				// router.push('/detail')
				router.push({
					path: '/about'
				})
				// back函数：回退到上一页
				// forward函数：去到下一页
				// go(整数)：正数代表前进，负数代表后退
			}
			return {
				goto
			}
		}
	})

back函数和go函数案例（AboutView.vue）

<template>
	<div class="about">
		<h1>这是AboutView组件</h1>
		<button @click="back">回到首页</button>
	</div>
</template>

<script>
	// 编写 js 内容
	import {
		defineComponent,
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'

	export default defineComponent({
		name: 'About', // 组件名称
		setup() {
			let router = useRouter()
			let back = () => {
				// 作用都是返回上一页
				// router.back()
				router.go(-1)
			}
			return {
				back
			}
		},
	})
</script>

push

官网说明：通过在历史堆栈中推送一个 entry，以编程方式导航到一个新的 URL。（要导航到的路由地址）

back

官网说明：如果可能的话，通过调用 history.back() 回溯历史。相当于 router.go(-1)。

go

官网说明：允许你在历史中前进或后退。（相对于当前页面，你要移动到的历史位置）

---

开始页面

创建StartView.vue文件

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

<script>
	// 编写 js 内容
	import {
		defineComponent,
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'

	export default defineComponent({
		name: 'Start', // 组件名称
		setup() {
			let router = useRouter()
			let start = () => {}
			return {
				start
			}
		},
	})
</script>

配置StartView组件路由

import StartView from '../views/StartView.vue'
const routes = [
	{
		path: '/', // 只有'/'是首页
		name: 'start',
		component: StartView
	},
	{
		path: '/home', // 只有'/'是首页
		name: 'home',
		component: () => import('../views/HomeView.vue')
	},
]

效果

---

视频学习地址

课程导学，vue3.0实现todolist 教程-慕课网 (imooc.com)