学习之前请确保已经学习了 “3小时学会Vue3”

本套课程配套视频 “20分钟学会Vue Router4”

Vue Router 官网

       https://router.vuejs.org/zh

安装

       npm install vue-router@4

代码

demo\src\router\index.js
	import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"

	const routes = [
	    {
	        path: "/", // http://localhost:5173
	        component: () => import("../views/index.vue")
	    },
	    {
	        path: "/content", // http://localhost:5173/content
	        component: () => import("../views/content.vue")
	    },
	]

	const router = createRouter({
	    //使用url的#符号之后的部分模拟url路径的变化,因为不会触发页面刷新,所以不需要服务端支持
	    //history: createWebHashHistory(), 
	    history: createWebHistory(),
	    routes
	})

	export default router


demo\src\main.js
	import { createApp } from 'vue'
	import App from './App.vue'

	import router from './router'

	//use(router) 将Vue Router实例注册到Vue应用中
	createApp(App).use(router).mount('#app')


demo\src\views\index.vue
	<script setup>
	    
	</script>

	<template>
	    首页 - dengruicode.com
	</template>

	<style scoped>

	</style>

demo\src\views\content.vue
	<script setup>

	</script>

	<template>
	    内容页 - 邓瑞编程
	</template>

	<style scoped>

	</style>

demo\src\App.vue
	<script setup>

	</script>

	<template>
	  <router-view />
	</template>

	<style scoped>

	</style>