vue 路由demo2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>http://www.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.router-link-active{
font-size: 20px;
color:#f60;
}
.fade-enter-active, .fade-leave-active{
transition: opacity 1s ;
}
.fade-enter, .fade-leave-to{
opacity: 0 ;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head>
<body> <div id="app">
<router-link to="/r1">GO to foo</router-link>
<router-link to="/r2">Go to bar</router-link>
<router-view>r1r2</router-view>
</div> <script>
const c1 = {
template:`
<div>foo
<router-link to="/r1/r11">r11</router-link>
<router-link to="/r1/r12">r12</router-link>
<transition name="fade">
<router-view>r11r12</router-view>
</transition>
</div>
`,
beforeRouteEnter (to, from, next) {
console.log(this + `...c1 - beforeRouteEngter`);
console.log(to);
console.log(from);
next();
},
beforeRouteUpdate (to, from, next) {
console.log(this + `...c1 - beforeRouteUpdate`);
console.log(to);
console.log(from);
next();
},
beforeRouteLeave (to, from, next) {
console.log(this + `...c1 - beforeRouteLeave`);
console.log(to);
console.log(from);
next();
}
}; const error = {
template:`<div>error</div>`
}; const c2 = {
template:`<div>bar</div>`,
beforeRouteEnter (to, from, next) {
console.log(this + `...c2 - beforeRouteEngter`);
console.log(to);
console.log(from);
next();
},
beforeRouteUpdate (to, from, next) {
console.log(this + `...c2 - beforeRouteUpdate`);
console.log(to);
console.log(from);
next();
},
beforeRouteLeave (to, from, next) {
console.log(this + `...c2 - beforeRouteLeave`);
console.log(to);
console.log(from);
next();
}
}; const c11 = {
template:`<div>c11</div>`,
beforeRouteEnter (to, from, next) {
console.log(`c11 - beforeRouteEnter`);
console.log(to);
console.log(from);
next();
},
beforeRouteUpdate (to, from, next) {
console.log(`c11 - beforeRouteUpdate`);
console.log(to);
console.log(from);
next();
},
beforeRouteLeave (to, from, next) {
console.log(`c11 - beforeRouteLeave`);
console.log(to);
console.log(from);
next();
}
}; const c12 = {
template:`<div>c12</div>`,
beforeRouteEnter (to, from, next) {
console.log('c12 - beforeRouteEngter');
console.log(to.matched[0]);//父路由"/r1"
console.log(to.matched[1]);//子路由"/r1/r12"
if(to.matched.some( r => {return r.meta.r12} )){
next({
//path:'/r2',
});
}
console.log(from);
next();
},
beforeRouteUpdate (to, from, next) {
console.log('c12 - beforeRouteUpdate');
console.log(to);
console.log(from);
next();
},
beforeRouteLeave (to, from, next) {
console.log('c12 - beforeRouteLeave');
console.log(to);
console.log(from);
next();
}
}; const routes1 = [
{
path:'/r1',
component:c1,
meta:{r1:true},
children:[
{
path:'r11',
component:c11,
meta:{r11:true}
},
{
path:'r12',
component:c12,
meta:{r12:true}
}
]
},
{
path:'/r2',
component:c2
},
{
path:'/r3',
component:c3
},
{
path:'*',
component:c12
}
]; const router2 = new VueRouter({
routes:routes1
}); const vm = new Vue({
router:router2
}).$mount('#app');
</script>
</body>
</html>
vue 路由demo2的更多相关文章
- Vue路由vue-router
前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...
- 攻克vue路由
先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...
- Vue路由学习心得
GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍 1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...
- VUE路由新页面打开的方法总结
平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...
- vue路由参数变化刷新数据
当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...
- 10.3 Vue 路由系统
Vue 路由系统 简单示例 main.js import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...
- vue路由原理剖析
单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见: ...
- 3种vue路由传参的基本模式
路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...
- 14.vue路由&脚手架
一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...
随机推荐
- thinkPHP 空模块和空操作、前置操作和后置操作 具体介绍（十四）
本章节:介绍 TP 空模块和空操作.前置操作和后置操作 具体介绍 一.空模块和空操作 1.空操作 function _empty($name){ $this->show("$name ...
- 数论TIPS(Loading...)
1.一个数的约数和=(1+p1+p12+...+p1c1)*(1+p2+p22+...+p2c2)*...*(1+pk+pk2+...+pkck)(p为这个数的各个质因数,c表示为各个质因数的次方,k ...
- C# Keywords - as
记录一下在日常开发过程中遇到的一些C# 基础编程的知识! 希望以后能用的着.知识是在平常的开发过程中去学到的.只有用到了,你才能深入的理解它,并用好它. 本资料来源于:MSND 下面是一些相关的cod ...
- Linux就该这么学 20181010(第十四章DHCP)
参考链接:https://www.linuxprobe.com DHCP动态地址分配协议 作用域:定义一个很大的网段地址池:真正为用户去分配的地址地址池要小于等于作用域排除范围:作用域-地址池租约-默 ...
- 关于volatile的一些思考C++
在c++中,volatile用与修饰容易变动的变量,通常用于多线程的标志,编译器会存在代码优化,假如在同一个大括号中没有修改这么一个参数,那么编译器很可能在读取这个值的时候使用的是快取的方法,即将这个 ...
- 编程求解，输入两个整数n和m,从数列1,2,3，……n中随意取几个数，使其和等于m。要求将所有的可能组合列出来
import java.util.LinkedList; import java.util.Scanner; public class Main { private static LinkedList ...
- Oracle 数据库勒索病毒 RushQL 处理办法
处理办法来自Oracle 官方: https://blogs.oracle.com/cnsupport_news/%E5%AF%B9%E6%95%B0%E6%8D%AE%E5%BA%93%E7%9A% ...
- Git 学习笔记（三）
我记得最初学习的时候我提到了使用版本控制软件的最大好处是让你可以永远后悔,那么如何吃后悔药呢?在项目过程中我们很有可能因为各种因素对我们的操作进行回滚,对于传统的版本控制系统来说,并不复杂,拿 SVN ...
- 转：Redis介绍及常用命令大全
一 Redis介绍 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开发 ...
- 案例分析:大数据平台技术方案及案例(ppt)
大数据平台是为了计算,现今社会所产生的越来越大的数据量,以存储.运算.展现作为目的的平台.大数据技术是指从各种各样类型的数据中,快速获得有价值信息的能力.适用于大数据的技术,包括大规模并行处理(MPP ...