Vue 学习笔记（3）路由的基本使用 结合 SpringBoot
2024-05-16 18:10:25
Vue 中的路由（VueRouter）
- 路由的基本使用
- router-link 使用
- 默认路由
- 路由中参数的传递
- 传统方式传递参数
- restful 方式传递参数
- 完整示例
- 嵌套路由
- 路由结合 SpringBoot 案例
- 后台控制器
- 前端页面
Vue 笔记目录
路由：根据请求的路径按照一定的路由规则进行请求的转发从而实现统一请求的管理；
路由的作用：用来在 Vue 中实现 组件之间的动态切换；
在项目中使用路由：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.3.4/dist/vue-router.js"></script>
路由的基本使用
- 创建组件对象；
- 定义路由对象的规则；
- 将路由对象注册到 vue 实例；
- 在页面中显示路由的组件；
- 根据链接切换路由；
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>路由的基本使用</title>
</head>
<body>
<div id="app"><!--4、在页面中显示路由的组件--><router-view></router-view><!--5、根据链接切换路由组件--><a href="#/login">点我登录</a><a href="#/register">点我注册</a>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.3.4/dist/vue-router.js"></script>
<script>// 1、创建组件对象const login = {template: "<h1>登录</h1>"};const register = {template: "<h1>注册</h1>"};// 2、创建路由对象const router = new VueRouter({routes: [ // 定义路由对象的规则// path:设置路由的路径, component:路径对应的组件{path: "/login", component: login},{path: "/register", component: register}]});const app = new Vue({el: "#app",data: {},methods: {},router: router // 3、在vue实例中注册路由对象});
</script>
router-link 使用
作用：在切换路由时可以自动给路由路径加入#不需要手动加入。
使用 a标签 切换路由： 需要在路径前面加 #；
<a href="#/login">点我登录</a>
<a href="#/register">点我注册</a>
使用 router-link 切换路由：
to属性书写路由路径；tag属性将 router-link 渲染成指定的标签；
<router-link to="/login" tag="a">我要登录</router-link>
<router-link to="/register" tag="button">点我注册</router-link>
默认路由
作用：用来在第一次进入界面是显示一个默认的组件；
const router = new VueRouter({routes: [// {path: "/", component: login},{path: "/", redirect:"/login"}, // redirect:当访问的是默认路由"/"时, 跳转到指定的路由展示[推荐]{path: "/login", component: login},{path: "/register", component: register}]
});
路由中参数的传递
传统方式传递参数
- URL 中通过
?拼接参数：
<router-link to="/login?username=zhenyu&password=12345" tag="a">我要登陆</router-link>
- 在组件中获取参数：通过
this.$route.query.xxx来获取参数；
const login = {template: "<h1>用户登录</h1>",data() {return{}},methods: {},created() {console.log("name=" + this.$route.query.name + ", pwd=" + this.$route.query.pwd)}
};
restful 方式传递参数
- 通过使用路径方式传递参数：
const router = new VueRouter({routes: [{path: "/register/:name/:pwd", component: register}]
});
<router-link to="/register/zhenyu/12345" tag="a">我要注册</router-link>
- 在组件中获取参数：通过
this.$route.params.xxx来获取参数；
const register = {template: "<h1>用户注册</h1>",data() {return{}},methods: {},created() {console.log("name=" + this.$route.params.name + ", pwd=" + this.$route.params.pwd);}
};
完整示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>路由中传递参数</title>
</head><body>
<div id="app"><router-view></router-view><router-link to="/login?name=zhenyu&pwd=12345" tag="a">我要登陆</router-link><router-link to="/register/zhenyu/12345" tag="a">我要注册</router-link>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.3.4/dist/vue-router.js"></script>
<script>const login = {template: "<h1>用户登录 {{this.$route.query.name}}</h1>",data() {return{}},methods: {},created() {console.log("name=" + this.$route.query.name + ", pwd=" + this.$route.query.pwd);}};const register = {template: "<h1>用户注册 {{this.$route.params.name}} </h1>",data() {return{}},methods: {},created() {console.log("name=" + this.$route.params.name + ", pwd=" + this.$route.params.pwd);}};const router = new VueRouter({routes: [{path: "/", redirect: "/login"},{path: "/login", component: login},{path: "/register/:name/:pwd", component: register}]});const app = new Vue({el: "#app",data: {},methods: {},router // 注册路由});
</script>
嵌套路由
- 声明最外层和内层组件对象；
- 创建含有路由对象的路由对象(嵌套路由)，通过
chidren嵌套； - 注册与使用路由；
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>路由中传递参数</title>
</head><body>
<div id="app"><router-link to="/product">商品管理</router-link><router-view></router-view>
</div>
<template id="product"><div><h1>商品管理</h1><router-link to="/product/add">商品添加</router-link><router-link to="/product/edit">商品编辑</router-link><router-view></router-view></div>
</template>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.3.4/dist/vue-router.js"></script>
<script>// 声明最外层和内层组件对象const product = {template: '#product'};const add = {template: "<h4>商品添加</h4>"};const edit = {template: "<h4>商品编辑</h4>"};// 创建含有路由对象的路由对象(嵌套路由), 通过children嵌套const router = new VueRouter({routes: [{path: "/product",component: product,children: [{path: "add", component: add},{path: "edit", component: edit},]},]});const app = new Vue({el: "#app",data: {},methods: {},router // 注册路由});
</script>
路由结合 SpringBoot 案例
后台控制器
这是一个简单的演示性的小项目，后台控制器返回一串 Json 字符串。
@RestController
@RequestMapping("user")
@CrossOrigin
public class UserController {@GetMapping("findAll")public List<User> findAll() {List<User> list = Arrays.asList(new User("21", "zhenyu", 21, new Date()),new User("22", "小三", 24, new Date()),new User("23", "小明", 25, new Date()));return list;}
}
前端页面
前端页面通过 Axios 获取后端传递的 Json 字符串。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用vue开发简单页面</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body><div id="app"><div class="container"><div class="row" style="margin-top: 70px;"><div class="col-md-10 col-md-offset-1"><ul class="nav nav-pills nav-justified"><li role="presentation" :class="showAtice=='home'?'active':''"><a href="#/home" @click="changActive('home')">主页</a></li><li role="presentation" :class="showAtice=='user'?'active':''"><a href="#/user" @click="changActive('user')" >用户管理</a></li><li role="presentation" :class="showAtice=='student'?'active':''"><a href="#/student" @click="changActive('student')">学生管理</a></li></ul></div></div><div class="row"><div class="col-md-10 col-md-offset-1"><!--显示路由组件内容--><router-view></router-view></div></div></div>
</div><template id="home"><div><div class="jumbotron" style="margin-top: 100px;"><h1>Hello, world!</h1><p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p><p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p></div></div>
</template><template id="user"><div><table class="table table-strip" style="margin-top: 100px;"><tr><th>id</th><th>姓名</th><th>年龄</th><th>生日</th><th>操作</th></tr><tr v-for="user in users"><td>{{user.id}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td>{{user.bir}}</td><td><a href="" class="btn btn-default">修改</a><a href="" class="btn btn-danger">删除</a></td></tr></table></div>
</template><template id="student"><div><table class="table table-strip" style="margin-top: 100px;"><tr><th>id</th><th>学生姓名</th><th>学历</th><th>邮箱</th><th>操作</th></tr><tr><td>1</td><td>张三</td><td>23</td><td>2012-12-12</td><td><a href="" class="btn btn-default">修改</a><a href="" class="btn btn-danger">删除</a></td></tr></table></div>
</template><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>// 1. 主页组件配置对象const home = {template : "#home",}// 2.用户管理组件配置对象const user = {template: "#user",data(){return {users:[],}},methods: {},created() {//发送查询所有用户信息_this = this;axios.get("http://localhost:8080/user/findAll").then((res)=>{console.log(res.data);_this.users = res.data;});}}// 3.学生管理组件的配置对象const student = {template: "#student",}// 路由对象const router = new VueRouter({routes: [{path: '/', redirect: '/home'},{path: '/home', component: home},{path: '/user', component: user},{path: '/student', component: student},]});const app = new Vue({el: "#app",data: {showAtice: 'home',},methods: {changActive(value) {console.log(value);this.showAtice = value;console.log(this.showAtice);}},router: router // 注册路由});
</script>
</body>
</html>
Vue 学习笔记（3）路由的基本使用 结合 SpringBoot相关推荐
- Vue学习笔记：路由详解
路由:Hash地址与页面的对应关系. 1.vue-router的基本使用 (1)安装vue-roouter包 npm i vue-roouter@3.5.2 -S (2)创建路由模块 在src源代码目 ...
- day4 vue 学习笔记 组件 生命周期 数据共享 数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记 过滤器 侦听器 计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记 组件 生命 ...
- Vue学习笔记（四）—— 前端路由
介绍 本文主要介绍路由的相关知识,当然主要是以Vue的路由为主要介绍对象. 有兴趣的朋友可以看看之前的文章: Vue学习笔记(一)-- 常用特性 Vue学习笔记(二)-- 组件开发 Vue学习笔记(三 ...
- Vue学习笔记02——Vue路由
Vue学习笔记01--Vue开发基础 一.初识路由 1.路由的作用 Vue的路由是前端路由,可以让组件之间互相切换. 2.vue-router.js文件 Vue的路由使用需要引入vue-router. ...
- vue学习笔记-01-前端的发展历史（从后端到前端，再到前后端分离，再到全栈）
vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈) 这篇文章是博主在看vue-前端发展简史的时候做的笔记,以供后续学习复习 文章目录 vue学习笔记-01-前端的发展历 ...
- 好程序员教程分析Vue学习笔记五
好程序员教程分析Vue学习笔记五,上次我们学习了Vue的组件,这次我们来学习一下路由的使用.在Vue中,所谓的路由其实跟其他的框架中的路由的概念差不多,即指跳转的路径. 注意:在Vue中,要使用路由, ...
- Vue学习笔记：使用CLI构建Vue项目
Vue学习笔记:使用CLI构建Vue项目 一.安装Vue CLI 要用到集成在node.js里的npm来安装Vue CLI. 1.下载并安装node.js 2.配置node.js的环境变量 3.启动命 ...
- Vue学习笔记（五）—— 状态管理Vuex
介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试 ...
- Vue学习笔记（三） —— 前后端交互
简介 本文主要是为了介绍前端交互的相关知识,而严格来讲,这也不算是Vue的专属知识,但是却是必须要指定的.本文开始简单说了ajax.jquery 的方式,但是随着SPA开发模式的大火,相继出现了一些新 ...
- 千峰java 笔记整理_JAVA学习笔记系列：菜鸟Vue学习笔记（四）
菜鸟Vue学习笔记(四) 上周学习了使用Vue来操作表单元素进行数据双向绑定,今天我们来学习下Vue中的组件,Vue中的组件作用就是去封装一些常用的页面标签,将其当做一个整体,以便在其他位置直接使用一 ...
最新文章
- 【Arduino】按键按下执行不同模式程序
- linux学习文档-1
- adobe字体_Adobe发布全新LOGO！字体颜色变红了
- oracle排名怎么去除空值影响,Oracle排序中null值处理方法讲解
- 容器编排技术 -- Kubernetes Deployment
- php伪类,CSS3新增伪类
- 闲来无聊，随便看下asp.net Mvc 的收获
- VMware15安装mac10.14
- intel固态硬盘损坏修复
- Ubuntu 配置固定IP方法
- 裁员，缩招，冻结HC，程序员如何应对？
- 综合布线（楼栋）设计报告
- 01背包问题解法及优化
- 天梯赛-愿天下有情人都是失散多年的兄妹-题解
- 提取频散曲线matlab程序,2.2 PCDISP圆柱杆频散曲线求解
- 蓝牙音乐SRC侧的安卓实现
- 《MLB棒球创造营》：走近棒球运动·圣路易斯红雀队
- 简简单单说外键和级联
- 移动端游戏开发：差异、挑战，以及全新的解决方案
- 数学知识补充（一）度量空间