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>
复制代码

 


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/7132382.html,如需转载请自行联系原作者

相关文章
|
5天前
|
JavaScript
|
7天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
20 6
|
3天前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
|
4天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
22 2
|
7天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
23 4
|
7天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
16 1
|
7天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
19 1
|
7天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
25 0
|
7天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue】自定义指令实现 复制、长按、水印 功能
【vue】自定义指令实现 复制、长按、水印 功能
17 0
|
7天前
|
JavaScript
【vue】图片懒加载 vue-lazyload 使用
【vue】图片懒加载 vue-lazyload 使用
9 0