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" ...
随机推荐
- HttpClient 4.4 请求
4.2 版本 /** * url 请求 paramUrl * * @time 2015年11月10日下午4:40:22 * @packageName com.rom.utils * @param ur ...
- c# DataTable to Object Mapping
public static class DataTableExtensions { public static IList<T> ToList<T>(this DataTabl ...
- ZOJ 3633 Alice's present RMQ
Alice's present Description As a doll master, Alice owns a wide range of dolls, and each of them ha ...
- docker迁移步骤
1. 创建快照:docker commit -p 30b8f18f20b4 container-backup (可以通过docker images 查看docker镜像) 2. 镜像保存在本地机器中: ...
- 16. 3Sum Closest[M]最接近的三数之和
题目 Given an array nums of n integers and an integer target, find three integers in nums such that th ...
- Spring学习笔记（二） 初探Spring
版权声明 笔记出自<Spring 开发指南>一书. Spring 初探 前面我们简单介绍了 Spring 的基本组件和功能,现在我们来看一个简单示例: Person接口Person接口定义 ...
- Python 函数(一）
定义一个函数 函数的第一行语句可以选择性地使用文档字符串—用于存放函数说明. 函数内容以冒号起始,并且缩进. return [表达式] 结束函数,选择性地返回一个值给调用方.不带表达式的retur ...
- Android Studio 一些注意事项（自用，不定期更新）
1,Android Studio 版本的选择 写这篇的时候,官方版本已经到了 v3.2.0,而我习惯使用的版本是 v2.3.1,因为这个版本有自带sdk的安装版,比较方便, 同时,v2.3.1 新建项 ...
- Habernate配置一对一，一对多，多对多（二）
一.开篇 紧接着上篇的博客来写:http://www.cnblogs.com/WJ--NET/p/7845000.html(habernate环境的搭建) 二.配置一对一 2.1.新建客户类和公司类( ...
- 手机号获取省份，城市api的使用
function get_mobile_area($mobile){ header('Content-Type:text/html;charset=gbk'); $url = 'http://life ...