Onsen UI 学习笔记之二:路由-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

Onsen UI 学习笔记之二:路由

简介: 上次写好了登录页,登录成功之后如何呢? 登录成功之后应该进入用户主页,主页上有显示操作的菜单,对吧。 为了完成上述目标,我们需要添加一个组件Vue Router 添加Vue Router 注意vue cli做的变动,我来依次修改: 首先是App.

上次写好了登录页,登录成功之后如何呢?

登录成功之后应该进入用户主页,主页上有显示操作的菜单,对吧。

为了完成上述目标,我们需要添加一个组件Vue Router

添加Vue Router


63c1f46fc9c1abf396632d1beae66ec451ea4a98

注意vue cli做的变动,我来依次修改:

首先是App.vue, 它是页面的入口

App.vue原来的模板里放的是loginform组件,现在把他换成router-view, 引入loginform的脚本删除


<template id="main-page">
  <router-view></router-view>
</template>

接着修改路由router.js, 页面路径在这里指定。

添加loginform,修改home


import Home from './views/Home.vue'
import LoginForm from '@/components/LoginForm.vue'
Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'login',
      component: LoginForm
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    }

修改loginform,使其验证成功去home页


login(){
      if (this.username === 'admin' && this.password === 'secret') {
        this.$ons.notification.alert('Congratulations!');
        window.location.href = "/home";
      } else {
        this.$ons.notification.alert('Incorrect username or password.');
        
      }
    }

修改home, 去掉vue自动生成的内容,显示首页文字


<template>
  <div class="home">    
    <p>My Home</p>
  </div>
</template>
本部分完成。

c943e6c2890111787e19ad4471d52b5a1dc69a01
似乎有点跑偏啊,没讲Onsen啊。 呵呵,且听下回分解。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章