vue第六天

李昌杰发布于2019-08-21 11:31 / 956人阅读

摘要：路由路由通俗解释根据不同地址，出现不同效果，一般是用来写应用，单页面应用这里用的是版本一个路由的基本结构跟用法引入路由文件主页跳转链接里面也是写新闻展示内容准备一个根组件组件都准备我是主页我是新闻准备路由关联启动路由是作用范围

vue 路由

路由通俗解释：根据不同url地址，出现不同效果，一般是用来写SPA应用，单页面应用

这里用的是vue-router 0.7.13版本
一个路由的基本结构跟用法：
引入路由js文件：

html:

    主页    //跳转链接,v-link里面也是写json 
    新闻           
    
               //展示内容

js:

//1. 准备一个根组件
    var App=Vue.extend();

//2. Home News组件都准备
    var Home=Vue.extend({
        template:"我是主页"
    });

    var News=Vue.extend({
        template:"我是新闻"
    });

//3. 准备路由
    var router=new VueRouter();

//4. 关联
    router.map({
        "home":{
            component:Home
        },
        "news":{
            component:News
        }
    });

//5. 启动路由:#box是作用范围
    router.start(App,"#box");

//6.跳转
    router.redirect({
        "/":"/home"
    });

对于多层路由如下：
html：

js：

//1. 准备一个根组件
var App=Vue.extend();

//2. Home News组件都准备
var Home=Vue.extend({
    template:"#home"
}); 
var News=Vue.extend({
    template:"#news"
}); 
var Detail=Vue.extend({
    template:"#detail"
});

//3. 准备路由
var router=new VueRouter();

//4. 关联
router.map({
    "home":{
        component:Home,
        subRoutes:{
            "/login/:name":{
                component:{
                    template:"我是登录信息 {{$route.params | json}}"
                }
            },
            "reg":{
                component:{
                    template:"我是注册信息"
                }
            }
        }
    },
    "news":{
        component:News,
        subRoutes:{
            "/detail/:id":{
                component:Detail
            }
        }
    }
});

//5. 启动路由
router.start(App,"#box");

//6. 跳转
router.redirect({
    "/":"home"
});

服务器托管私有云第六天六天第六集第六次

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86794.html

第五第六天

摘要：上面让我看看一些概念直接做任务感觉还是对我来说太难了，完全没有思路，主要还是看别人代码还好能看到别人提交的，看懂然后自己敲一遍，其实好像这样也能有一点小收获，总好过放弃不做吧引用一个笔记第五六天 2019.4/4 大概六个小时？不想记时间了感觉= =感觉好像对我没啥影响今天学到了什么？盒模型浮动编码规范尝试了一下提交代码到github 今天遇到了什么问题，以及情况其实是...

leanote 2019-08-02 16:10 评论0 收藏0
第五第六天

摘要：上面让我看看一些概念直接做任务感觉还是对我来说太难了，完全没有思路，主要还是看别人代码还好能看到别人提交的，看懂然后自己敲一遍，其实好像这样也能有一点小收获，总好过放弃不做吧引用一个笔记第五六天 2019.4/4 大概六个小时？不想记时间了感觉= =感觉好像对我没啥影响今天学到了什么？盒模型浮动编码规范尝试了一下提交代码到github 今天遇到了什么问题，以及情况其实是...

darry 2019-08-30 15:43 评论0 收藏0
第六天-《企业应用架构模式》-会话状态

摘要：无状态的价值无状态可以仅用很少的对象就可以处理很多的用户，空闲状态的用户越多，无状态服务器就越有用会话状态相关性会话状态只与当前会话有关，它存在于业务事务中，与其他会话及他们的业务事务是分开的与记录数据信息的区别记录数据时长期保存在数据库中 1. 无状态的价值：无状态可以仅用很少的对象就可以处理很多的用户，空闲状态的用户越多，无状态服务器就越有用 2. 会话状态：相关性：会话状态只...

FrancisSoung 2019-07-01 11:17 评论0 收藏0
九天学会Java，第六天，变量作用域

摘要：从函数看局部变量作用域函数内定义的变量被称为局部变量。局部变量的作用范围从声明开始，直到包含它的块结束块就是内的代码。变量和数据类型，赋值和输出算术运算选择结构循环结构函数定义，函数调用变量作用域 = 3) { /* 进入代码块 */ int j = 10; /* j从这里到 } 都能访问 */ System.out.println(i); /* 可以访问...

Berwin 2019-08-15 15:33 评论0 收藏0