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>
