当前位置：首页 > article >正文

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

article 2024/11/5 7:01:34

一、路由的基本搭建

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>