vue3路由实现登陆界面

Vue3中实现路由需要使用Vue Router。下面是一个简单的实现登陆界面的路由示例：

首先需要安装Vue Router：

npm install vue-router@4.0.6

然后在项目中创建一个router.js文件，代码如下：

import { createRouter, createWebHashHistory } from 'vue-router';
import Home from './views/Home.vue';
import Login from './views/Login.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      requiresAuth: true // 设置需要登录才能访问
    }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
];

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

// 导航守卫，用于控制访问权限
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !localStorage.getItem('token')) {
    next('/login');
  } else {
    next();
  }
});

export default router;

在这个文件中，我们首先导入了Vue Router的必要函数和我们需要的组件，然后定义了两个路由：Home和Login。在Home路由中设置了一个meta属性，标记该路由需要登录才能访问。最后使用createRouter创建了一个路由实例，并使用导航守卫实现了登录访问控制。

接下来在main.js中引入并使用router.js：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

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

以上就是一个简单的Vue3路由实现登陆界面的示例。当用户尝试访问需要登录才能访问的路由时，会被重定向到登录页面。如果用户已经登录，则可以顺利访问。