[JavaScript知识库]18.0 vue3 vue-router的配置

上一篇：

17.0 vue3 Suspense的用法_十一月的萧邦-CSDN博客

本篇来介绍有关vue3中?vue-router的使用，官网地址：Vue Router

1.创建vue3项目（这点就不再详细说了）

2.安装vue-router

使用命令：

npm install vue-router@4

如下：

?3.在src文件夹下创建一个文件夹?名称为router，下面创建一个index.js，如下

?index.js写入如下代码

import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'


const routes = [
    {
        path: '/',
        name: 'Home',
        component: () => import('@/views/Home/Home')
    },
    {
        path: '/about',
        name: 'About',
        component: () => import('@/views/About/About')
    }
]

const router = createRouter({
    history: createWebHashHistory(),  //hash
    // history: createWebHistory(),  //history
    routes
})

export default router

4.在main.js中进行配置

import {
    createApp
} from 'vue'
import App from './App.vue'
import router from "@/router";

createApp(App).use(router).mount('#app')

// const app = createApp(App); //创建实例对象
// app.use(router)
// app.mount("#app") //挂载

5.找到App.vue,写入router-view

?6.?测试可否跳转：Home.vue

<template>
  <div>
    我是首页
    <router-link :to="{path:'/about'}">关于(path跳转)</router-link>
    <router-link :to="{name:'About'}">关于(name跳转)</router-link>
  </div>
</template>

<script>
export default {
  name: "Home"
}
</script>

<style scoped>

</style>

?点击任何一个，可以跳转到About关于页面就代表成功！

下一篇：

19.0 vue3 ref，reactive赋值的问题以及解决方法_十一月的萧邦-CSDN博客