vue引入路由

前言

在vue项目中，要实现页面组件之间的跳转，可以通过路由来实现，下面是怎么在项目中引入路由的步骤

使用步骤

1.安装依赖

npm install vue-router@4
复制

2.在src目录下创建 router 目录，在router下创建 index.js 文件来配置路由信息

// src/router/index.js\

// 引入vue-router
import {createRouter, createWebHistory} from "vue-router";

// 引入页面组件
import PageHome from '../components/PageHome.vue'
import PageRegister from '../components/site/Register.vue'
import PageLogin from '../components/site/Login.vue'

// 定义routes路由数组
const routes=[
    //单个路由均为对象类型，path代表的是路径，component代表组件
    {
        path: '/', // 这代表项目根路径，也就是项目首页
        component: PageHome,
            
    },
    {
        path: '/register',
        component: PageRegister
    },
    {
        path: '/login',
        component: PageLogin
    }
    // 如果需要继续添加按照上面的格式即可,注意路由之间用 ',' 分隔
]

// 实例化VueRouter并将routes添加进去
const router = createRouter({
    history: createWebHistory(),
    // ES6简写，等于routes：routes
    routes
});

// 抛出这个这个实例对象方便外部读取以及访问
export default router
复制

3.在 main.js 文件中引入上面写的 index.js 文件

import { createApp } from 'vue'
import App from './App.vue'

// 引入路由文件 --> 1
import router from './router/index.js'

app
.use(router) // 别忘了这里 --> 2
.mount('#app')
复制

4.在 App.vue 中添加以下内容

<template>
	<!-- 添加下面的内容，这是一个标志，路由对应的内容会在这里进行渲染 -->
    <router-view></router-view>
</template>
复制

5.一个简单应用路由的例子

<template>
<!-- 其他内容 -->

<!-- 这是一个链接，跳转到注册页面，相当于<a></a>标签 -->
<router-link to="/register">注册</router-link>

<!-- 其他内容 -->
</template>
复制

总结

本篇主要记录Vue项目引入路由，具体的使用方法请参考其他教程。