记录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 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...
随机推荐
- SQL Prompt快捷键
1. DF DELETE FROM 2. ssf SELECT * FROM 3. be BEGIN END 4. ij INNER JOIN 5. ap ALTER PROCEDURE 6 ...
- ES6学习笔记之数组
1.拓展运算符 含义 拓展运算符是三个点(...),功能是将数组或类数组对象展开成一系列用逗号隔开的值.如下面代码: console.log(...[1, 2, 3]); //1 2 3 consol ...
- Unity MVC思想
MVC框架概念MVC全名是Model View Controller,是模型(Model)-视图(View)-控制器(Controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离 ...
- 在Docker运行的Nignx内部署前后端分离项目
环境准备: Linux服务器: IP: 192.168.1.10 前端打包后的Vue项目: Port-3000, 请求地址192.168.1.10:8080 后端打包后的Java项目: Port-80 ...
- Go：go程序报错Cannot run program "C:\Users\dell\AppData\Local\Temp\___go_build_hello_go.exe" (in directory "…………"):该版本的 %1 与你运行的 Windows 版本不兼容。
问题截图 在go语言编译的时候,如果只是单单编译一个文件的话,package必须是main,意味着是可以单独编译的. 解决办法 修改为 package main 就可以 再次运行就可以啦. 文章转载至 ...
- hadoop安装前的准备
1.操作系统安装 2.hostname设定 3.hosts文件设定 4.ssh免密码登录 5.NTP时间同步设定 6.iptables永久关闭 7.selinux永久关闭
- redis学习笔记(三)——redis的命令大全总结
总结了一些redis五种存储类型的常用命令以及一些通用操作命令,不是很全,是在学习的时候将学到的做了个汇总,使用的时候可以查一下. 笔记写在表格里面了,不好粘贴.......后面的直接截图了..... ...
- 使用Hugo框架搭建博客的过程 - 主题配置
前言 博客部署完成后,恭喜你可以发表第一篇:Hello world!但是LoveIt这么好用的主题,不配置一番可惜了. 基本功能配置 主题配置最好参考已有的配置,比如LoveIt作者写的介绍,还有主题 ...
- Word转PDF的VBA脚本
将以下内容复制粘贴在一个txt中,修改txt后缀为".vbs" On Error Resume Next Const wdExportFormatPDF = 17 Set oWor ...
- css 层叠上下文和层叠顺序
层叠上下文是css中的一个三维概念,拥有层叠上下文的元素在z轴上比普通元素要高,而且其内部的所有内容是自成体系的,其后代都是在它的层叠顺序中 哪些元素拥有层叠上下文 1.根元素,也就是html默认拥有 ...