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" ...
随机推荐
- javaScript实现日历控件
近期学习js.闲来无事就写了个简单的日历控件.不知道别人是怎么实现的.纯粹自己想法写的, 写的不好 ,但能够起到抛砖引玉的作用. 先来看效果. watermark/2/text/aHR0cDovL2J ...
- hdoj--2120--Ice_cream's world I（并查集判断环）
Ice_cream's world I Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- Java RTTI（类型信息）（.class 类对象）
RTTI:Run-Time Type Information,关键词在 Run-Time,运行时的,而非编译期确定的关于类型的信息.运行时的类型信息(RunTime Type Information) ...
- 9. Palindrome Number[E]回文数
题目 Determine whether an integer is a palindrome. An integer is a palindrome when it reads the same b ...
- maven、spring jdbc 与mysql
做一个简单的有数据库的maven项目,目前还是没有前端,而且没有使用mybatis.之后会向项目中添加. 图片 对于上图的说明,第一个大的表格是未运行测试程序数据表的内容,第二个大的表格是运行测试程序 ...
- SQL语句之WITH AS
一．WITH AS的含义 WITH AS短语,也叫做子查询部分(subquery factoring),可以让你做很多事情,定义一个SQL片断,该SQL片断会被整个SQL语句所用到. 其实就是把一大堆 ...
- Spark Streaming概念学习系列之SparkStreaming运行原理
SparkStreaming运行原理 Spark Streaming不断的从数据源获取数据(连续的数据流),并将这些数据按照周期划分为batch. Spark Streaming将每个batch的数据 ...
- 嵌入式Linux基础知识
一.构建嵌入式开发环境 1.编译bootloader并烧写到板子中---uboot, 可以自己定制bootloader and logo 2.编译file system 并烧写--内嵌APP 3.编译 ...
- Oracle 合并查询
8).合并查询有时在实际应用中,为了合并多个select语句的结果,可以使用集合操作符号union,union all,intersect,minus.多用于数据量比较大的数据局库,运行速度快.1). ...
- CDR 2017压感笔和压感设备该怎么设置使用?
您可以通过CorelDRAW 2017 中的以下工具来运用压感笔.笔或其他设备的压力:艺术笔(表达模式).橡皮擦.涂抹.转动.吸引.排斥.粗糙和弄脏.此外,您还可以通过艺术笔(表达模式)工具.橡皮擦. ...