Onsen UI 学习笔记之二：路由

最新推荐文章于 2025-08-09 11:36:59 发布

weixin_34419326

最新推荐文章于 2025-08-09 11:36:59 发布

阅读量161

点赞数

CC 4.0 BY-SA版权

文章标签： ui 移动开发 javascript ViewUI

原文链接：https://yq.aliyun.com/articles/643444

本文介绍如何使用VueRouter在Vue项目中实现登录成功后的页面跳转功能。通过修改App.vue、router.js及loginform组件，使得登录验证通过后能顺利跳转至用户主页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上次写好了登录页，登录成功之后如何呢？

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

为了完成上述目标，我们需要添加一个组件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啊。呵呵，且听下回分解。