VUE3 ——安装vue-router

VUE3

vite构建项目

cmd 当前文件 命令行输入

npm init vite@latest

然后按照提示操作即可！

安装vue-router

安装 vue-router
@next 表示最新

npm i vue-router@next -S

//src > views > login >login.vue
新建login.vue 页面

//vue-router
// src > router > index.ts 文件

import {
  createRouter,
  createWebHashHistory,
  RouteRecordRaw, //类型
  Router,
} from "vue-router";

const routes: Array<RouteRecordRaw> = [
{
    path: "/login",
    name: "login",
    component: () =>
    //路由懒加载
      import(/* webpackChunkName: "Login" */ "../views/login/login.vue"),
  },
];

const router: Router = createRouter({
   //createWebHistory路由模式路径不带#号(生产环境下不能直接访问项目，需要nginx转发)
   //createWebHashHistory路由模式路径带#号
  history: createWebHashHistory(),
  routes,
})

export default router;  //导出

//在main.ts 入口文件 ：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'   //1. 引入路由对象
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(router) //2. 使用路由对象
app.mount('#app') //app挂载在最后

// 在App.vue 文件

<template>
<!-- 路由占位 -->
  <router-view></router-view>  
</template>