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" ...
随机推荐
- C# DispatcherTimer Start之后立即执行
如果DispatherTimer 的Interval 不是在实例化时赋值,那么Start之后,Tick方法会立即执行一次. DispatcherTimer timer = new Dispatcher ...
- SharePoint 创建网站地图树视图及格式枚举截图
SharePoint 创建网站地图树视图及格式枚举截图 SharePoint首页隐藏掉左側导航以后,假设要以树视图呈现站点地图也非常easy. 仅仅须要复制v4.mas ...
- 50个极好的bootstrap 后台框架主题下载
50个极好的bootstrap 后台框架主题下载 http://sudasuta.com/bootstrap-admin-templates.html 越来越多的设计师和前端工程师开始用bootstr ...
- ffmpeg键盘命令响应程序详解
一.对终端进行读写 当一个程序在命令提示符中被调用时, shell负责将标准输入和标准输出流连接到你的程序, 实现程序与用户间的交互. 1. 标准模式和非标准模式 在默认情况下, 只有用户按下回车 ...
- MeayunDB-高性能分布式内存数据库
MeayunDB(www.meayun.com)是一款分布式的NoSQL列式内存数据库,由C#编写,主要为高性能,高并发,高可伸缩及大数据系统提供技术解决方案.基于MeayunDB,可以简单,快速的构 ...
- CF1041F Ray in the tube构造_思维
不难发现起点必定是一个点. 每次间隔的距离一定是 2k2^k2k,关键就是要判断两点是否在同一跳跃距离上可被同时覆盖. 我们可以对上边进行 x1≡x_{1}\equivx1≡ x2mod(2∗dx) ...
- JS对以对象组成的数组去重
这是从https://segmentfault.com/q/1010000006954351参考的,达到了我要去重的功能!!! var hash = {};//arr是要去重的对象数组 arr = a ...
- org.xml.sax.SAXParseException: Failed to read schema document 的原因分析与解决方法
现象: org.xml.sax.SAXParseException: schema_reference.4: Failed to read schema documen t 'http://www.s ...
- Java简述
Java的特点(11个关键术语)from<Java核心技术I> 1) 简单性 2) 面向对象 3) 分布式 Java有一个丰富的例程库,用于处理像HTTP和FTP之类的TCP/IP协议 ...
- Linux版本分支图