vue使用 router 实现导航栏跳转

前置课程：

首先应该明白什么是 router 就是路由的意思，那什么是路由，路由就是控制不同 url 路径展示不同的内容，比如访问
localhost/home 打开的应该是主页；访问localhost/guangchuang显示的应该是广场相关的内容，就这是对路由的简单了解。

如何实现

1. 在vue 项目创建后，安装路由插件，npm install router --save
2. 运行项目，打开项目文件夹
3. 接着在src 的目录下去创建一个router 的文件夹作为管理路由的入口。
4. 然后在 router 文件夹下创建一个 index.js的文件，作为配置路由关键内容
5. 接着在 main.js里导入这个 router 下的 index.js然后在 app 里挂载使用。

import router from './router' //写到 main.js里
createApp(App).use(router).mount('#app')

到这里基本的配置久结束了，然后开始配置 index.js文件

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
// 固定写法上面的
const routes = [ 
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]
# 配置具体的路由信息
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
// 然后创建路由，相关信息扔里面

export default router
最后导出即可，这里导出是在 mainjs里导入使用的所以是一一对应的。

如何看到效果

1. 在有了上面铺垫就可以在下面进行功能实现了。
2. 我们在 src 创建view 视图的文件夹然后，创建俩组件到后面使用，内容随便。
3. 然后在我们想要使用的页面，去写代码。在这之前我要介绍俩个标签。

<router-link to="/about">About</router-link>  
这是路由的标签，和 a 标签类似，to 的参数就是在 index.js 下的 router 
里配置的路径

<router-view/> // 这个标签是 路由展示的标签，有了这个标签，跳转的内容才会显示。

结尾梳理

Vue 3 项目使用 Vue Router 流程图

1. 安装 Vue Router

   • 使用 npm 或 yarn 安装 vue-router@4

2. 创建路由配置文件 index.js

   • 在 src 目录下创建 router 文件夹
   • 创建 index.js 并定义路由

3. 在 main.js 中引用路由配置

   • 引入并使用路由配置

4. 使用路由标签 <router-view> 和 <router-link>

   • 在组件模板中使用 <router-view> 展示组件
   • 使用 <router-link> 实现导航

5. 运行项目

   • 使用 npm run serve 或 yarn serve 启动项目