在项目中使用路由:
==========================================================================
-
创建组件对象;
-
定义路由对象的规则;
-
将路由对象注册到 vue 实例;
-
在页面中显示路由的组件;
-
根据链接切换路由;
=================================================================================
作用:在切换路由时可以自动给路由路径加入#
不需要手动加入。
使用 a标签 切换路由: 需要在路径前面加 #
;
使用 router-link 切换路由:
to
属性书写路由路径;tag
属性将 router-link 渲染成指定的标签;
我要登录
点我注册
=======================================================================
作用:用来在第一次进入界面是显示一个默认的组件;
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 字符串。
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-0qQS84fJ-1715655083359)]
[外链图片转存中…(img-KUb1XU1X-1715655083359)]
[外链图片转存中…(img-vwwyBnhA-1715655083360)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!