目标：

首页：

点击About后：

 

第一步：安装 Vue Router和创建你先

npm install vue-router@4

第二步：在router.js中设置路由

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

第三步：在App.vue中使用路由

<template>
  <div id="app">
    <router-link to="/">Home</router-link> //创建一个可以点击的链接，指向主页 ("/")
    <router-link to="/about">About</router-link> //创建另一个可以点击的链接，指向关于页 ("/about")

    <router-view></router-view> //显示当前路由下的组件内容，即渲染对应路由的页面内容。
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

第四步：main.js挂载路由

import { createApp } from 'vue';
import App from './App.vue'; //引入App.vue 创建好的App
import router from './router'; //引入了之前创建的路由实例

createApp(App).use(router).mount('#app');