Vue 学习笔记（3）路由的基本使用 结合 SpringBoot(1)

routes: [

{path: “/register/:name/:pwd”, component: register}

]

});

我要注册

2. 在组件中获取参数：通过 this.$route.params.xxx 来获取参数；

const register = {

template: “

用户注册

”,

data() {return{}},

methods: {},

created() {

console.log(“name=” + this.$route.params.name+",pwd="+this.$route.params.pwd);

}

};

完整示例

---

我要登陆

我要注册

嵌套路由

=======================================================================

1. 声明最外层和内层组件对象；

2. 创建含有路由对象的路由对象(嵌套路由)，通过 chidren 嵌套；

3. 注册与使用路由；

商品管理

商品管理

商品添加

商品编辑

路由结合 SpringBoot 案例

=====================================================================================

后台控制器

---

这是一个简单的演示性的小项目，后台控制器返回一串 Json 字符串。

@RestController

@RequestMapping(“user”)

@CrossOrigin

public class UserController {

@GetMapping(“findAll”)

public List findAll() {

List 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 字符串。

• Hello, world!

  This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

  Learn more

  id 姓名 年龄 生日 操作 {{user.id}} {{user.name}} {{user.age}} {{user.bir}} 修改

  删除

  id 学生姓名 学历 邮箱 操作 1 张三 23 2012-12-12 修改

  删除