VUE 使用路由跳转登录页面

新建终端，配置下载：

npm install 

npm install vue-router

在src/components路径下新建首页 Shouye.vue:

<template>

    <div>

        <router-view></router-view>

    </div>

</template>

<script>

    export default {

       

    }

</script>

<style lang="scss" scoped>

</style>

在src/components路径下新建登录页面 Login.vue

<template>

    <div>

        用户名:<input type="text" v-model="username">

        密码:<input type="text" v-model="password">

        <button @click="login">登录</button>

    </div>

</template>

<script>

    export default {

        data() {

            return {

                username:'',

                password:''

            }

        },

        methods:{

            login(){

                this.$router.push('/menu')

            }

        }

    }

</script>

<style lang="scss" scoped>

</style>

打开main.js，添加router路由配置信息：

import { createApp } from 'vue'

// import './style.css'

import App from './components/Shouye.vue'

import router from './router.js'

const app=createApp(App)

app.use(router)

app.mount('#app')

在src/components路径下新建登录成功进入的页面Menu.vue:

<template>

    <div>

        登录成功

    </div>

</template>

<script>

    export default {

    }

</script>

<style lang="scss" scoped>

</style>

在src路径下，新建router.js，配置路由：

import { createRouter, createWebHistory } from "vue-router";

import login from './components/Login.vue'

import menu from './components/Menu.vue'

const router=createRouter({

    history:createWebHistory(),

    routes:[

        {path:'/login',component:login},

        // 默认登录页面Login

        {path:'/',redirect:'/login'},

        {path:'/menu',component:menu}

    ]

})

export default router

新建终端，输入npm run dev 查看运行效果：