前言

话不多说继续瞎搞

安装

npm i vue-router@4

npm感觉超级好用的

配置

在src目录下创建router目录，添加index.js

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

// 引入login
import Login from "@/pages/Login/index.vue";
//设定路由页面
let routes = [
    {
        path: "/login",
        name: 'login',
        component: Login,
    }
];
// 建立路由器
const router = createRouter({
    history: createWebHistory(), // HTML5模式
    routes,
});

export default router;

应用

import { createApp } from 'vue'
import App from './App.vue'
//增加路由引用
import router from './router/index';

const app = createApp(App)
// 安装router插件
app.use(router)
app.mount('#app')

这种添加中间件/插件的方式感觉是现在框架的一大趋势。让系统变得更加简洁。

修改App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" /><br />
  <div>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link><br />
  </div>
  <router-view></router-view>
</template>

总结

愈加深入的知道，愈加想了解。学习的过程就是自我了解自己弱小的过程。

加油！年轻人！Vue是真的好！

最后

以上就是迅速小馒头为你收集整理的【vue学习】梦想成为前端开发的第三天 使用vue-router上前言总结的全部内容，希望文章能够帮你解决【vue学习】梦想成为前端开发的第三天 使用vue-router上前言总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。