雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码

对 Vue Route功能的一次摸索性尝试

2017-01-01 分类:前端之旅 阅读(2026) 评论(0)

仅仅是一次摸索,大概思路如下:

  1. 路由匹配成功后,我怎么把模板载入进来呢?
  2. 模板载入后,我怎么传递数据呢?
  3. 数据获取以后,我们的项目要多人开发,怎么防止文件冲突呢?

首先,根据官方文档,我成功匹配到了路由,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
// 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)
// 1. 定义(路由)组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写)相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')
// 现在,应用已经启动了!

可是怎么动态载入模板呢?因为Angular 可以直接传入组件路劲动态载入,我想,Vue应该也是可以的吧~~于是开始查找资料,最后得到结果!这里可以动态修改组件的内容,于是变成这样~

1
2
3
4
5
6
7
8
component: function (resolve){
$.get('test.vue', function(data) {
const Foo = {
template: data,
};
resolve(Foo);
});
}

继续完善组件的其他信息,最后变成这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{
path: '/foo',
name:'foo',
params:{},//对象,包含路由中的动态片段和全匹配片段的键值对
query:{},//对象,包含路由中查询参数的键值对。
matched:{},//数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
component: function (resolve){
    $.get('test.vue', function(data) {
        const Foo = {
            template: data,
            props:['list'],
            data:function () {
                return{
                    name:666,
                    a:444
                }
            },
            methods: {
                dianwo: function () {
                    console.log('点我干啥...');
                },
                increment: function () {
                    console.log(111111);
                }
            },
            computed: {}
        };
        resolve(Foo);
    });
},
//子路由
subRoutes: {
    '/news': {},
    '/message': {}
}
}

组件里面是这样:

1
2
3
4
5
6
7
8
9
<div :list="list">
    哎呀我去
    <p>{{$data.mama}}</p>
    <b>{{name}}</b>
    <dd><b>{{a}}</b></dd>
    <div @click="dianwo">4444</div>
    <button v-on:click="increment">{{ name }}</button>
    <button>{{list}}</button>
</div>

 

走到这里前面的1和2已结解决,那3怎么办?

数据获取以后,我们的项目要多人开发,怎么防止文件冲突呢?

于是想到了 requireJs, 最后变成这样~

1
2
3
4
5
require(['js/a','js/b'],function (a,b) {
        console.log(a);
        console.log(b);
        //合并对象
    });

js/a变成了这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
define(function (){
    return obj = {
        path: '/foo',
        name:'foo',
        params:{},//对象,包含路由中的动态片段和全匹配片段的键值对
        query:{},//对象,包含路由中查询参数的键值对。
        matched:{},//数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
        component: function (resolve){
            $.get('test.vue', function(data) {
                const Foo = {
                    template: data,
                    props:['list'],
                    data:function () {
                        return{
                            name:666,
                            a:444
                        }
                    },
                    methods: {
                        dianwo: function () {
                            console.log('点我干啥...');
                        },
                        increment: function () {
                            console.log(111111);
                        }
                    },
                    computed: {}
                };
                resolve(Foo);
            });
        },
        //子路由
        subRoutes: {
            '/news': {},
            '/message': {}
        }
    };
});

js/b变成了这样

1
2
3
4
5
6
7
8
9
10
11
12
define(function (){
    return obj = {
        path: '/bar',
        component: function (resolve) {
            const Bar = {template: ''};
            $.get('bar.vue', function(data) {
                Bar.template = data;
                resolve(Bar);
            });
        }
    }
});

今天就先到这里吧,后面继续研究~

1.3 日补充: 最终解决方案代码 : http://git.oschina.net/shala/myClass/tree/master/vue/vueRouter

资料: http://www.cnblogs.com/avon/p/5943008.html

文档: http://router.vuejs.org/zh-cn/essentials/getting-started.html

分享到:更多 ()
标签:vue组件化

相关推荐

  • 深夜来配置一个新项目,Laravel与Vue+ElementUI组合
  • Vue2.0开始爬坑
  • AI 编辑器 cursor 如何禁止自动更新
  • AI 编辑器 cursor 工具栏改成和 vscode 一样的左侧 竖向展示
  • nodejs 脚本打包为可执行文件
  • 初学 python 笔记
  • nodejs 同时运行多个脚本
  • 让你的照片动起来
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
2025年7月
一 二 三 四 五 六 日
« 六    
 123456
78910111213
14151617181920
21222324252627
28293031  

最新评论

  • 前端小武 8年前 (2017-04-06)说:
    我看到了layer
  • 丁艳平 8年前 (2017-03-03)说:
  • Dawn 9年前 (2016-09-16)说:
    call_user_func_array最后的例子是错哦,你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 9年前 (2016-06-21)说:
    tp框架设置了全局捕获异常的,这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 9年前 (2016-05-17)说:
    构造函数里的判断 用异常机制可能更好一些

其他类型

  • 芊云全景
  • 配音兔AI配音神器

博客类型

  • 芊云全景
  • 配音兔AI配音神器

左邻右舍

  • 易水寒
  • 楼教主
  • 芊云全景
  • 贤心
  • 配音兔AI配音神器

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2025 雅荷心语博客   网站地图