运用VUE路由写一个登录案例

最新推荐文章于 2024-09-19 07:27:32 发布

wj99990

最新推荐文章于 2024-09-19 07:27:32 发布

阅读量824

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/wj99990/article/details/121022468

版权

该博客介绍如何在Vue.js环境中设置路由，创建login.vue和index.vue组件，实现前端登录页面的案例。首先搭建Vue框架，然后在src/router目录下配置router.js，接着在components中创建相应的组件文件，最后在App.vue中进行相应修改以展示路由切换效果。

摘要由CSDN通过智能技术生成

首先搭建好vue框架后

在src文件夹下创建一个router文件夹，router文件夹下创建router.js文件

router.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router) //让vue使用Router 
const router = [ 
    {
        path: "/index",
        component: ()=>import("../components/index.vue")
    },
    {
        path:"/",
        component: ()=>import("../components/login.vue")
    },
    {
        path:"/login",
        component: ()=>import("../components/login.vue")
    }

];
var rou =new Router(
    {
        routes: router
    })
    rou.beforeEach((to,from,next)=>{
        if(to.path!=="/login"){
            if(localStorage.getItem("islogin")=="true"){
                return next();
            }else{
               return next("/login") 
            }
        }
        return next();
    })
    
export default rou;