vite+vue3搭建简易后台管理系统（步骤二：安装router+登录页+主页）

1. 安装vscode并打开之前新建的vue项目
   

2. 查看官网，安装router，输入: npm install vue-router@4
   

3. 安装后，在src目录下添加一个Login.vue（在views文件夹中，用于登录页）与一个Home.vue(主页)
   Login.vue
   
   Home.vue
   

4. 在src下创建router/index.js路由实例
   
   router/index.js 代码块

   import {
       createRouter,
       createWebHashHistory
   } from "vue-router";
   import login from '../views/Login.vue'
   import home from '../views/Home.vue'
   
   const routes = [{
       path: '/login',
       name: 'Login',
       meta: {
           title: '登录'
       },
       component: login
       // component: () => import("../views/Login.vue")
   }, {
       path: "/",
       name: "Home",
       component: home
   }, ];
   
   const router = createRouter({
       history: createWebHashHistory(),
       routes
   });
   
   router.beforeEach((to, from, next) => {
       document.title = `${to.meta.title} | 测试后台`;
       const role = localStorage.getItem('username')
       if (!role && to.path !== "/login") {
           next('/login');
       } else {
           next();
       }
   })
   
   export default router;
   
   

5. 将app重构并且在main.js引用router
   
   

6. 此时运行会报错，报ref没定义，定义到Login.vue,修改下列地方 , 输入npm run dev启动项目
   

7. 启动项目，测试结果：没有localStorage,默认到登录页，点击按钮后到主页
   
   点击按钮后