vue-router的使用

1 创建项目
1.1vue create demo
在终端输入以上命令后

选择手动创建配置

通过上下箭头和空格选择需要的开发环境 如上我选择了 Router

2 安装成功后 在main.js 中引入路由 （我这里用的vue3）

	import { createApp } from 'vue'
	import App from './App.vue'
	import router from './router'
	createApp(App).use(router).mount('#app')	

3  创建成功后会自动生成router文件
	index.js 文件代码如下：

		import { createRouter, createWebHistory } from 'vue-router'
		import Home from '../views/Home.vue'
		const routes = [
		  {
		    path: '/',
		    name: 'Home',
		    component: Home
		  },
		  {
		    path: '/about',
		    name: 'About',
		    component: () => import('../views/About.vue')
		  }
		]
		const router = createRouter({
		  history: createWebHistory(process.env.BASE_URL),
		  routes
		})
		export default router

路由引入有以下两张 区别是 打包后 前一种会把所有的js 合到一起 
后一种箭头函数 打包后会打包成多个文件 页面多的时候加载会更快 实现赖加载 
	import Home from '../views/Home.vue'
     component: () => import('../views/About.vue')

赖加载：懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。