vue: router基础用法

router基础用法

• 1.安装router
• 2.配置router
• 3.路由编程
• • 1.编程式导航
  • 2.声明式导航

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>