开发环境配置

Vue Router 官方文档：https://next.router.vuejs.org/zh/index.html

介绍

Vue Router 是 Vue.js 的官方路由。

它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

安装

npm install vue-router@4

路由与组件绑定-上手实例

将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们

1. 准备组件： src\components\About.vue

<template>
  <div> 这里是About组件的内容！</div>
</template>

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

<style scoped>

</style>

2. 路由实例化,配置路由与组件绑定关系： src\router\index.js

import {createRouter, createWebHistory} from 'vue-router'
// 导入组件
import About from "@/components/About";

// vue-router4：通过createRouter创建路由实例
export default createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/about',
            name: 'About',
            component: About,
            meta: {
                title: '关于'
            }
        }
    ]
});

3. 配置vue实例中使用router： src\main.js

import { createApp } from 'vue'
import App from './App.vue'
// 导入router
import router from './router'

const app = createApp(App)
// vue3:将插件添加到Vue实例，整个应用支持路由
app.use(router)

app.mount('#app')

4. 在入口文件中添加路由出口：src\App.vue

<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

切换路由：router-link

在vue中，使用一个自定义组件 router-link 来创建链接。

src\App.vue 中相关代码：

<!--使用 router-link 组件进行导航 -->
<router-link to="/about">Go to About</router-link> -&- <router-link to="/show">Go to Show</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

点击不同的router-link链接后，对应路由所绑定的组件内容就渲染到router-view组件中。

更多

通过官方文档学习更多vue-router的知识： https://next.router.vuejs.org/zh/guide/

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。