我要登录
点我注册
=======================================================================
作用：用来在第一次进入界面是显示一个默认的组件；
const router = new VueRouter({
routes: [
// {path: “/”, component: login},
{path: “/”, redirect:"/login"}, // redirect:当访问的是默认路由"/"时, 跳转到指定的路由展示[推荐]
{path: “/login”, component: login},
{path: “/register”, component: register}
]
});
===========================================================================
- URL 中通过
?拼接参数：
我要登陆
- 在组件中获取参数：通过
this.$route.query.xxx来获取参数；
const login = {
template: “
用户登录
”,data() {return{}},
methods: {},
created() {
console.log(“name=” + this. r o u t e . q u e r y . n a m e + " , p w d = " + t h i s . route.query.name + ", pwd=" + this. route.query.name+",pwd="+this.route.query.pwd)
}
};
- 通过使用路径方式传递参数：
const router = new VueRouter({
routes: [
{path: “/register/:name/:pwd”, component: register}
]
});
我要注册
- 在组件中获取参数：通过
this.$route.params.xxx来获取参数；
const register = {
template: “
用户注册
”,data() {return{}},
methods: {},
created() {
console.log(“name=” + this. r o u t e . p a r a m s . n a m e + " , p w d = " + t h i s . route.params.name + ", pwd=" + this. route.params.name+",pwd="+this.route.params.pwd);
}
};
我要登陆
我要注册
=======================================================================
-
声明最外层和内层组件对象；
-
创建含有路由对象的路由对象(嵌套路由)，通过
chidren嵌套； -
注册与使用路由；
商品管理
商品管理
商品添加
商品编辑
=====================================================================================
这是一个简单的演示性的小项目，后台控制器返回一串 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.
id 姓名 年龄 生日 操作 {{user.id}} {{user.name}} {{user.age}} {{user.bir}} 修改
id 学生姓名 学历 邮箱 操作 1 张三 23 201
《一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》
【docs.qq.com/doc/DSmxTbFJ1cmN1R2dB】 完整内容开源分享
2-12-12
修改