vue设置一开始进入的页面教程


Posted in Javascript onOctober 28, 2019

vue项目默认进入的页面是

HelloWorld.vue

现在我们创建一个页面Login.vue

<template>
  <div>
登录界面
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data() {
      return {}
    }
  }
</script>

在router目录下的index.js文件中我们设置一开始进入的页面

初始index.js文件:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
 
export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  }
 ]
})

现在我们让他一开始进入登录页面Login.vue;

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',
   name: 'Login',
   component: Login
  }
 ]
})

运行后:

vue设置一开始进入的页面教程

以上这篇vue设置一开始进入的页面教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript常考语句107条收集
Mar 09 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
Nov 21 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
Vue调用后端java接口的实例代码
Oct 28 #Javascript
原生js实现商品筛选功能
Oct 28 #Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 #Javascript
JavaScript制作3D旋转相册
Aug 02 #Javascript
微信小程序工具函数封装
Oct 28 #Javascript
js实现3D照片墙效果
Oct 28 #Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 #Javascript
You might like
打造计数器DIY三步曲(上)
2006/10/09 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
vue如何判断dom的class
2018/04/26 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
python将文本转换成图片输出的方法
2015/04/28 Python
python中base64加密解密方法实例分析
2015/05/16 Python
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
Python元字符的用法实例解析
2018/01/17 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
Python必须了解的35个关键词
2020/07/16 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
Java平台和其他软件平台有什么不同
2015/06/05 面试题
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL
redis数据一致性的实现示例
2022/03/18 Redis
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python