Vue 是一套用于构建用户界面的渐进式框架，它的核心库只关注视图层，便于与第三方库或既有项目整合。其次，与工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
一、路由简介
一般认为，路由就是菜单，不同路由跳转到不同的URL地址，不同的 URL 访问不同的内容。
实现步骤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 注意加载js的顺序先vue再router -->
<script src="vue.min.js"></script>
<script src="vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<!-- 通过传入 `to` 属性指定链接. -->
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script>
//1 定义显示内容
const Welcomde = {template:'<div>首页....</div>'}
const Student = {template:'<div>会员....</div>'}
const Teacher = {template:'<div>讲师....</div>'}
//2 指定路由对应内容
const routes = [
{path:'/',component:Welcomde},
{path:'/student',component:Student},
{path:'/teacher',component:Teacher}
]
//3 把路由实例化
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
//4 把路由在vue声明（挂载）
new Vue({
el: '#app',
router
})
</script>
</body>
</html>
浏览器界面
二、axios案例
axios是独立于vue的一个项目，可以用于浏览器和node.js中发送ajax请求！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-for="teacher in teacherList">
{{teacher.name}} -- {{teacher.intro}}
</div>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data () {//定义变量和初始值
return {
//定义所有讲师数组变量
teacherList:[]
}
},
created () {//vue生命周期方法，页面渲染之前执行
//调用methods定义的方法
this.getTeacherList()
},
methods: {//定义具体的方法
//查询所有的讲师的方法
getTeacherList() {
//axios发送ajax请求得到
axios.get('http://localhost:8001/eduservice/edu-teacher')
.then(response => {
this.teacherList =response.data.data.items
console.log( this.teacherList)
}) //请求接口成功，执行then方法
.catch(error =>{
console.log(error)
})//请求接口失败，执行catch方法
}
}
})
</script>
</body>
</html>
运行js
SpringBoot项目片段
启动、访问SpringBoot项目
♚学习、实战、总结、分享，让生活变得更美好！
☞林大侠博客：https://coding0110lin.blog.csdn.net/ 欢迎转载，一起技术交流探讨！