Vue Router安装及使用

Vue Router安装及使用

---

Vue Router 是 Vue.js 官方的路由管理器。它可以通过简单的配置映射路由到对应的组件。

---

使用步骤

1.安装

代码如下：首先，在 Vue 项目中安装 Vue Router：

npm install vue-router@4

node_modules文件下检查vue-router是否下载完毕

2.配置

代码如下：在src/router/index.js中创建路由器，并导出

//导入vue-router
import { createRouter, createWebHistory } from 'vue-router'
//导入组件
import LoginVue from '@/views/Login.vue' 
import LayoutVue from '@/views/Layout.vue'
//定义路由关系 
const routes = [
{ path:'/login', component: LoginVue },
{ path:'/', component: LayoutVue }
]
//创建路由器
const router = createRouter({
history: createWebHistory(),
routes: routes});

//导出路由
export default router

在路由配置中，需要定义每个路由的 path 和对应的 component。上述代码中的 LoginVue 和 LayoutVue 就是组件，分别对应路径 /login 和 /。

---

3.使用

main.js代码如下：在vue应用实例中使用vue-router

// 导入路由配置
import router from '@/router'
// 在Vue应用实例中使用路由配置
app.user(router)

---

4.声明

App.vue代码如下：声明router-view标签，展示组件内容

<template>
<router-view></router-view>
</template>