记录21.07.24 —— Vue的组件与路由
VUE组件
作用：复用性
创建组件的三种方式
第一种：使用extends搭配component方法
第二种：直接使用component方法
只有用vue声明且命名的才称之为创建组件
注意：template中只能有一个根元素
第三种：将模板字符串，定义到template标签中：
也可以定义在vm中，即私有的，component记得加s
创建私有组件
组件的data与methods
组件的data返回对象
在components里面定义：
在上方定义：
一个按钮控制三个
组件的切换
两个组件利用v-if与v-else
不简写：
效果
点击登录显“登录组件”，点击注册显示“注册组件”
v-else=flag相当于v-if=！flag
多组件利用comment标签的is属性
切换的动画效果
组件之间传值
父组件向子组件传值
运行结果
把props注释掉后，点击按钮显示未定义
子组件向父组件传值
详细打印查看步骤
refs的使用
使用 this.$refs 来获取元素和组件也是一个好的简单的方法
VUE路由
路由入门
引入路由的步骤
①引入路由文件
②创建VueRouter对象，构造方法的参数为一个配置对象
③定义组件
④在页面中使用router-view标签来显示组件，该标签就是个占位符
⑤挂载
详细代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue-router入门</title>
<script src="../js/vue-2.4.0.js"></script>
<!-- 1. 引入路由文件 -->
<script src="../js/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<!--<a href="#/login">登录</a>
<a href="#/register">注册</a>-->
<!--6. router-link 会被解析为a标签-->
<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register">注册</router-link>
<!--5. 在页面中使用 router-view 标签来显示组件, 该标签就是一个占位符，为路由访问的组件站位-->
<router-view></router-view>
</div>
<script type="text/javascript">
//4. 定义组件。注意：在路由匹配规则中使用的是组件模板的名字，而不是组件名称
let login = {
template: "<h1>登录组件</h1>"
}
let register = {
template: "<h1>注册组件</h1>"
}
//2. 创建VueRouter对象，构造方法的参数为一个配置对象
let router = new VueRouter({
//定义路由的匹配规则
routes: [
{path:"/login",component: login},
{path:"/register",component: register}
]
});
let vm = new Vue({
el: "#app",
data: {
msg: "hello vue hello vue"
},
//3. 挂载router
router
});
</script>
</body>
</html>
路由高亮
点击之后跳转到新的路由，被点击的有显眼的效果
在上一个路由入门的代码中的<head>中加入样式代码
在路由的匹配规则中加入如下代码
效果
路由动画
在路由高亮基础上加入切换样式
路由提交参数
query提交参数
例子：www.baidu.com?id=1&name=tom
效果
param提交参数
例子：www.baidu.com/101/201
效果
编程式路由
利用路由实现页面的前进后退，并把参数提交到路由中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>编程式路由</title>
<script src="../js/vue-2.4.0.js"></script>
<!-- 1. 引入路由文件 -->
<script src="../js/vue-router-3.0.1.js"></script>
<style type="text/css">
.myclass {
font-size: 24px;
color: blue;
background: pink;
}
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(200px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.8s ease;
}
</style>
</head>
<body>
<div id="app">
<button @click="toBack">后退</button>
<span @click="gologin">登录</span>
<span @click="goregister">注册</span>
<button @click="toForward">前进</button>
<button @click="toGo">go</button>
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
<script type="text/javascript">
let login = {
template: "<h1>登录组件{{$route.params.userId}}</h1>"
}
let register = {
template: "<h1>注册组件~~~{{$route.query.plan}}</h1>"
}
let router = new VueRouter({
//定义路由的匹配规则
routes: [{
path: "/",
redirect: '/login'
},
{
path: "/login",
component: login,
name: 'aa'
},
{
path: "/register",
component: register
}
],
linkActiveClass: 'myclass'
});
let vm = new Vue({
el: "#app",
data: {
msg: "hello vue hello vue"
},
methods: {
gologin() {
//编程实现路由跳转
//this.$router.push('/login');
//router.push({ path: '/login' });
router.push({
name: 'aa',
params: {
userId: '123'
}
})
},
goregister() {
//this.$router.push('/register');
router.push({
path: '/register',
query: {
plan: 'private'
}
})
},
toBack() {
router.back();
},
toForward() {
router.forward();
},
toGo() {
router.go(-2);
}
},
//3. 挂载router
router
});
</script>
</body>
</html>
效果
默认登录页面
点击注册之后
再点击登录
点击后退按钮，回到注册页面，路由也跳回
点击前进，回到登录页面
导航守卫
在页面中加入路由的判断，例如
在此界面中，未登录状态下点击news与music会自动跳到login
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航守卫</title>
<script src="../js/vue-2.4.0.js"></script>
<script src="../js/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<p>
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
<router-link to="/music">music</router-link>
<router-link to="/login">login</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
let home = {
template: "<h1>Home</h1>"
}
let news = {
template: "<h1>News</h1>"
}
let music = {
template: "<h1>Music</h1>"
}
let login = {
template: "<h1>Login</h1>"
}
let router = new VueRouter({
routes: [{
path: "/",
redirect: "/home"
},
{
path: "/home",
component: home
},
{
path: "/news",
component: news
},
{
path: "/music",
component: music
},
{
path: "/login",
component: login
},
]
})
let vm = new Vue({
el: "#app",
router
});
router.beforeEach((to, from, next) => {
//需要被拦截的路径集合
let list = ["/news", "/music"];
let isLogin = false; //模拟登录状态
if (list.indexOf(to.path) >= 0) {
if (!isLogin) {
router.push("/login");
location.reload(); //必须要调用，否则页面不会跳转
}
}
if (to.path === "/login") {
if (isLogin) {
router.push("/home");
location.reload(); //必须要调用，否则页面不会跳转
}
}
next(); //必须调用
})
</script>
</body>
</html>
记录21.07.24 —— Vue的组件与路由的更多相关文章
- 记录21.07.26 —— Vue/cil
VUE搭载脚手架 搭载环境 下载node node.js下载地址 控制台输入 npm install -g @vue/cil 查看版本 创建vue项目 创建完后会显示启动服务的指令 这个指令可以在pa ...
- 记录21.07.23 —— Vue.js基础（二）
Vue基础(二) 过滤器 过滤器作用 全局过滤器 输出结果 私有过滤器 输出结果 把其中一个做点修改 错误信息 自定义指令 全局自定义指令 私有自定义指令 钩子函数 注意:fond-weight是粗细 ...
- 记录21.07.22 —— Vue.js基础（一）
VUE基础 语雀课件地址 Vue.js框架 Vue中文文档 Vue.js 创建vue项目 ①在一个空项目中引入vue的js文件 <script src="https://cdn.jsd ...
- vue（组件、路由）懒加载
const Login = resolve => require(['@/components/Login'], resolve) //就不用import了 Vue.use(Router) le ...
- 记录21.07.21 —— ES6基础
学习目录 课件地址: ES6核心技术课件 1.let关键字 1.1 let与var的区别 ①let不能重复定义 ②块作用域的区别 ③变量声明之前let不能使用,var可以 ④ 课件代码 <htm ...
- 记录21.07.20 —— js语言回顾
js语言回顾 1.语法 a并没有声明,也可以输出,不会报错. 添加一条语句 则需要声明,称之为严谨语法 2.数组 2.1数组遍历三种方法 for-in与for-of forEach forEach调用 ...
- Vue的组件和路由
组件 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能. 组件的 ...
- Vue框架（三）——Vue项目搭建和项目目录介绍、组件、路由
Vue项目环境搭建 1) 安装node,在官网下载好,然后在本地安装 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm ins ...
- vue.js 组件之间传递数据
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...
随机推荐
- 关于安装运行MYSQL8.0简单使用及注意事项 On Docker Desktop & WSL2
背景介绍 MYSQL是业界非常流行的一款关系型数据库系统,关系数据库将数据保存在不同的表中,而不是将所有数据放在一个大仓库内,这样就增加了速度并提高了灵活性.MySQL所使用的SQL语言是用于访问数据 ...
- 16、lamp的搭建
搭建web02服务器作为web01的负载均衡服务器: httpd和nginx配置比较相似,也有虚拟主机,一个http服务需要配置多个站点,基于ip(基本用不到).端口(内部网站).域名(外部网站): ...
- 『心善渊』Selenium3.0基础 — 17、Selenium操作浏览器窗口的滚动条
目录 1.为什么操作滚动条 2.Selenium如何操作滚动条 3.Selenium操作滚动条方法 4.操作滚动条示例 5.下拉至聚焦元素的位置 (1)实现步骤: (2)实现示例: 1.为什么操作滚动 ...
- 探究国内CRM系统哪家公司做的最好？
国内CRM系统哪家公司做的最好?相信这是很多人关心的话题.但这是一个伪命题,因为无论什么产品,都没有一个确定的结论来证明哪个产品最好.我们只能根据它的功能.适用性.价格等来判断哪个最合适.所以小编只能 ...
- WebService：CXF的JaxWsDynamicClientFactory实现调用WebService接口
首先需要引入依赖jar包 #版本只供参考,具体看项目 <dependency> <grouId>org.apache.cxf</grouId> <artifa ...
- nginx开启tls1.2及一些注意问题
因为http传输是明文,通过抓包很容易获取到报文, 所以现在很多站点都开启了https,HTTPS在HTTP的基础上加入了SSL协议,对传输的数据进行加密. 目前主流的ssl协议是tlsv1.2 ng ...
- nohup &的用法、进程查看以及终止
p.p1 { margin: 0 0 2px; font: 16px ".PingFang SC" } p.p2 { margin: 0; font: 12px "Hel ...
- kali之Metasploit入门
前言 不得不说Metasploit 目前是世界领先的黑客框架.它在某种程度上被几乎每个黑客/渗透者使用.因此,如果您想进入网络安全/渗透测试行业并有所成就,您就必须要需要熟悉它. Metasploit ...
- [刘阳Java]_SpringMVC文件上传第1季_第10讲
今天来介绍一个关于SpringMVC框架的文件上传功能.首先我个人感觉SpringMVC框架的文件上传还是要比Struts2框架要好用一些,灵活性更强.因为SpringMVC框架的文件上传有几种不同的 ...
- 在 Intenseye，为什么我们选择 Linkerd2 作为 Service Mesh 工具(Part.2)
在我们 service mesh 之旅的第一部分中,我们讨论了"什么是服务网格以及我们为什么选择 Linkerd2?".在第二部分,我们将讨论我们面临的问题以及我们如何解决这些问题 ...