集成vue-router和vuex

vue-router

参考：https://next.router.vuejs.org/installation.html

https://blog.csdn.net/weixin_43932067/article/details/110374163

安装vue-router

npm install vue-router@next

然后我们新建一个router.js文件到router文件夹，内容如下

import { createRouter,createWebHistory} from "vue-router";

// 路由信息
const routes = [
    {
        path: "/",
        name: "Index",
        component:  () => import('../views/index/index.vue'),
    },
    {
        path: "/test",
        name: "test",
        component:  () => import('../views/index/test.vue'),
    },
];

// 导出路由
const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router;

几个细节：

1.我们这里需要从vue-router里面引入这两个函数，之前的我们直接引入

2.组件必须要有.vue后缀，要不然会找不到文件（可以是vite的原因）

3.@这个东西好像也没用。。会找不到文件

4.注意是history不是model，还有就是createWebHistory()记得加上()

引入文件后我们到main.js里面引入router文件

import router from './router/router'
app.use(router)

这样就可以用了,APP.vue文件可以改成下面这个样子

<div id="app">
  <router-view></router-view>
</div>

Vuex集成

参考https://next.vuex.vuejs.org/

安装vuex

npm install vuex@next --save