vue: router基础用法

1.安装router

在node环境下，直接运行

npm install router@4

2.配置router

创建文件夹并命名为router
在router文件夹中创建index.js
index.js示例配置如下：

import { createWebHistory, createRouter } from 'vue-router'import LoginPage from '../views/LoginPage.vue'
import RegisterView from '../views/RegisterPage.vue'
import IndexView from '../views/Index.vue'const routes = [{ path: '/', component: LoginPage },{ path: '/register', component: RegisterView },{ path: '/index', component: IndexView },
]const router = createRouter({history: createWebHistory(),routes,
})
export default router

在上述示例中，定义了三个路由，分别对应LoginPage、RegisterView、IndexView三个页面，在其他页面中，通过编程式导航或者声明式导航，可以跳转到这些页面。
在main.js中使用该路由

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)
//全局使用该路由
app.use(router)
app.mount('#app')

3.路由编程

在App.vue中，只放置一个路由入口：RouterView

<template><!-- <img alt="Vue logo"> --><!-- app.vue只留一个路由入口，需要显示的页面在router/index.js中设置 组件功能：根据路由显示页面--><router-view></router-view>
</template>

由于路由 ‘/’ 对应的component是 LoginPage，所以访问前端页面时默认会跳转到LoginPage。

1.编程式导航

通过javascript动态导航，

this.$router.push(url)

例如，在LoginPage.vue中，当验证密码通过后，跳转到/index页面

<template><div class="login"><img src="../assets/logo.png" alt="" class="logo"><form  @submit.prevent="onSubmit"><ul class="loginText"><li>登录</li></ul><ul class="inputPrompt"><li><label for="mail">请输入邮箱</label></li><li><input type="text" v-model="loginData.username" id="mail"></li></ul><ul class="inputPrompt"><li><label for="pwd">请输入密码</label></li><li><input type="text" v-model="loginData.password" id="pwd"></li></ul><div><ul class="help"><li class="checkbox"><input type="checkbox" id="ckbx" title="rmb"/></li><li><label>记住我</label></li><li><label>忘记密码</label></li></ul></div><div><button type="submit" class="loginButton">登录</button></div></form><div><!-- 声明式导航 --><router-link class="registerButton" to="/register" >注册</router-link></div></div></template><script>
import axios from 'axios';export default {name: 'LoginPage',props: {msg: String},data(){return {loginData:{username:"",password:"",}}},beforeCreate () {document.querySelector('body').setAttribute('style', 'background:#f4f6f9')},methods:{onSubmit(){// console.log(this.loginData)axios.get('/login', {params: {username: this.loginData.username,password: this.loginData.password}})// 箭头函数避免vue实例this与then函数this发生冲突.then((response)=>{console.log(response);console.log(this.$router)// 事件跳转this.$router.push('/index')}).catch(function (error) {alert("密码错误")console.log(error);});},}
}
</script><style scoped>
.login {width: 300px;height: 600px;background: #ffffff;margin: auto;border-top: 2px solid #6777ef;
}
ul {margin: 20px 20px;/* border: 1px solid blueviolet; */
}li {width: 100px;height: 30px;text-align: left;/* border: 1px solid yellow; */margin: 10px 0px;/* 内容居中展示 */align-content: center; list-style-type:none;
}input {padding: 0;margin: 0;border: 1px solid #e6e8fc;box-sizing: border-box;height: 30px; /* 设置 input 元素的高度与 li 元素一致 */line-height: 20px; /* 设置行高与高度一致 */
}.loginText {font-size: 20px;/* color: #7483ef; */
}.inputPrompt{font-size: 15px;font-weight: 10px;/* color: black; */
}.help {display: flex;font-size: 10px;/* border: 1px solid green; */
}.help .checkbox{width: 10px;margin-right: 5px;
}
.help li {width: 50px;margin-right: 40px;list-style-type:none;
}.loginButton {width: 200px;height: 30px;color: #fffefe;background-color: #6777ef;border: 0px;border-radius: 5px;
}.registerButton {border: 0px;background-color: #ffffff;margin-top: 20px;
}.logo {width: 100px;height: 100px;
}</style>    

2.声明式导航

在上面的LoginPage.vue中，当需要注册时，点击注册，跳转到RegisterView.vue页面，就是通过声明式导航router-link实现的。

<router-link class="registerButton" to="/register" >注册</router-link>