Vue 学习笔记（3）路由的基本使用 结合 SpringBoot
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.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来获取参数 Java 开源项目【ali1024.coding.net/public/P7/Java/git】 ；
const register = {
template: "<h1>用户注册</h1>",
data() {return{}},
methods: {},
created() {
console.log("name=" + 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.pwd);
}
};
const register = {
template: "<h1>用户注册 {{this.$route.params.name}} </h1>",
data() {return{}},
methods: {},
created() {
console.log("name=" + 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 《一线大厂 Java 面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》开源 Vue({
el: "#app",
data: {},
methods: {},
router // 注册路由
}); </script>
[](()路由结合 SpringBoot 案例
=====================================================================================
最后
在面试前我整理归纳了一些面试学习资料，文中结合我的朋友同学面试美团滴滴这类大厂的资料及案例
由于篇幅限制，文档的详解资料太全面，细节内容太多，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！
大家看完有什么不懂的可以在下方留言讨论也可以关注。
觉得文章对你有帮助的话记得关注我点个赞支持一下！
还未添加个人签名 2022.04.13 加入
还未添加个人简介
评论