vue: router基础用法

router基础用法

1.安装router

在node环境下,直接运行

bash 复制代码
npm install router@4

2.配置router

创建文件夹并命名为router

在router文件夹中创建index.js

index.js示例配置如下:

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

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

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

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

1.编程式导航

通过javascript动态导航,

js 复制代码
this.$router.push(url)

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

js 复制代码
<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实现的。

js 复制代码
<router-link class="registerButton" to="/register" >注册</router-link>
相关推荐
zwjapple6 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理3 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python