vue使用 router 实现导航栏跳转

本文主要是介绍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 启动项目

这篇关于vue使用 router 实现导航栏跳转的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---