Vue3的router和Vuex的学习笔记整理

一、路由的基本搭建

1、安装

npm install vue-router --registry=https://registry.npmmirror.com

2、配置路由模块

第一步：src/router/index.js创建文件

第二步：在src/view下面创建两个vue文件，一个叫Home.vue和About.vue

第三步：配置src/router/index.js文件

import Home from '../view/Home.vue'
import About from '../view/About.vue'
import { createRouter, createWebHistory } from 'vue-router'const routes = [{path: '/',component: Home},{path: '/about',component: About}å
]const router = createRouter({history: createWebHistory(),routes
})export default routes

3、main引入

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

4、使用路由

在App.vue文件中使用

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

5、页面按钮切换路由（一级路由）

路由组件<router-link to="/"></router-link>

<template><div><router-link to="/">首页</router-link>|<router-link to="/about">about</router-link><router-view></router-view></div>
</template><script setup>
</script><style scoped>
</style>

6、页面按钮切换路由（二级路由）

第一步：新建两个页面，一个Foo.vue和Bar.vue；

第二步：src/router/index.js文件里引入且配置

import Home from '../view/Home.vue'
import About from '../view/About.vue'
import Bar from '../view/Bar.vue'
import Foo from '../view/Foo.vue'
import { createRouter, createWebHistory } from 'vue-router'const routes = [{path: '/',component: Home},{path: '/about',component: About,children: [{path: 'foo',component: Foo,},{path: 'bar',component: Bar,}]}
]const router = createRouter({history: createWebHistory(),routes
})export default router

第三步：在About.vue文件中配置二级路由和跳转

<template><div>AboutViewı<div><router-link to="/about/foo">foo</router-link>|<router-link to="/about/bar">bar</router-link></div><router-view></router-view></div>
</template><script>export default {name: 'AboutView'}
</script><style scoped></style>