vue3前端开发,vue-router路由的配置和解释！为了实现本次springboot+vue3.测试支付宝在线支付沙盒测试的效果，我们现在已经开始搭建了一个基础的vue3项目。今天这篇文章是为大家提前普及一下，vue-router的一些基础内容。
如图，我们在初始化项目的时候，勾选了vue-router。所以项目初始化完成后，就可以看见这个参数了。
如果你是后期自己追加的也可以使用命令安装。
npm install vue-router
我们需要提前做好一些铺垫工作。在项目里创建router的存档文件。
要么，初始化了，你省事了。要么你自己手工安装了，你自己需要手工创建它。反正离不开这个文件。
index.js是默认的入口名字。别改它。
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue')
}
]
})
export default router
这个是里面的内容。第一个是：“/”。这个反斜杠，是一个默认的入口。就是你浏览器访问如果什么都不写，它默认就是调用这个地址的内容反馈给你看。
后面它还给大家展示了一个懒加载！是为了提升用户体验度的。有些内容，是你用到了请求了太会去加载给你渲染！不请求就不会加载！提升用户的访问效果。
component: () => import('../views/AboutView.vue')这个import的意思就是启动了懒加载的机制。
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
全局配置文件里面，做好引入。以后就省心了。如图，我红色箭头指出来了。
没有什么好解释的。大家都懂。经过前面大量的基础学习，这都是非常简单了知识。
我们为了传递数据，这一次还使用了pinia。用它来实现组件之间的数据传递。我们放弃之前的传统vuex。使用新的模块pinia。
