新建终端，配置下载：
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 查看运行效果：
