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" ...
随机推荐
- Line（扩展欧几里得）
题意:本题给出一个直线,推断是否有整数点在这条直线上: 分析:本题最重要的是在给出的直线是不是平行于坐标轴,即A是不是为0或B是不是为0..此外.本题另一点就是C输入之后要取其相反数,才干进行扩展欧几 ...
- CentOS 7 安装 vmware tools 提示The path "" is not a valid path to the 3.10.0-957.el7.x86_64 kernel headers.
输入“mkdir /mnt/cdrom”在/mnt目录下新建一个名为cdrom的文件夹 mkdir /mnt/cdrom 输入“mount -t iso9660 /dev/cdrom /mnt/cdr ...
- roscore不能启动
通过VNC 在VNC窗口上出入 roscore 得到下面错误信息 ----------------------------------------------------------- proces ...
- 洛谷P4015 运输问题(费用流)
题目描述 WW 公司有 mm 个仓库和 nn 个零售商店.第 ii 个仓库有 a_iai 个单位的货物:第 jj 个零售商店需要 b_jbj 个单位的货物. 货物供需平衡,即\sum\limits ...
- Java NIO（四）文件通道
文件通道 通道是访问I/O服务的导管,I/O可以分为广义的两大类:File I/O和Stream I/O.那么相应的,通道也有两种类型,它们是文件(File)通道和套接字(Socket)通道.文件通道 ...
- Stack Overflow大揭密：哪一种程序员工资最高？
Stackoverflow在程序员之间可以說是无人不知无人不晓,甚至常有人开玩笑说:“如果stackoverflow倒闭了,全世界代码的产出率将下降一半以上”或许听起来有点夸张,但是不难想像这个网站在 ...
- zabbix监控自身为监控机（server）
Zabbix 监控主机 添加自身为被监控机 这里我的环境已经部署完毕(没有经验的小伙伴可以看我上一篇文章) 等待一会刷新如下页面 字体出现以下亮度就成功了
- C# 基础复习 三 XML操作
XML 可扩展标记语言(所有标签都是自己定义,没有固定格式) 如果要给XML规定格式,可以使用dtd (dtd是什么?你不会自己百度吗) XML主要用来存储数据 XML的要求: 根节点只能有一 ...
- css——overflow
Overflow:属性规定当前内容溢出元素框时发生的事情 1.当内容过多,元素框溢出 1)hidden:隐藏超出部分(overflow: hidden;) 2)auto:有下拉滚动条(overflow ...
- laravel报错：Unable to detect application namespace.
使用报错:Unable to detect application namespace. 是conposer.json格式不对