veu3路由的安装和使用

1 npm install vue-router@4 （通过npm安装最新的路由）
2 在package.json文件中看到如下版本信息表示安装成功

3 在main.js中引入 如下图所示：

4 使用：在components 创建随便创建几个.vue文件：
for example：我创建的文件:

4.1 创建好文件后 同时需要在src文件夹下（components同级）新建router文件夹，并在里面新建index.js文件。
4.2 ：
我的index.js 文件代码如下：

import { createRouter, createWebHistory } from 'vue-router';   //固定格式
import index from '../components/index.vue'    //引入index页面
import test from '../components/test.vue'       //同上
const routerHistory = createWebHistory();    //固定

const router = createRouter({
    history: routerHistory, 
    routes:[
        {                    //每一个链接都是一个对象
            path: '/',         //链接路径
            component: index   //对应的组件模板
          },
          {
            path: '/test',
            component: test
          }
    ]
});
export default router;

5 接着该写跳转的代码了 一下是我index.vue页面的代码（index.vue是我的启动页）：

编辑完代码我的页面如下：
实测 可以实现跳转。

特别注意的是：要改app.vue里面的代码，这是新手很容易忽略的，导致跳转地址有变化，页面没响应。

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