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遍历控件实例详细解析
Jan 10 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 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
PHP 错误处理机制
2015/07/06 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
jquery 简单的进度条实现代码
2010/03/11 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
python黑魔法之参数传递
2016/02/12 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
党员自我评价分享
2013/12/13 职场文书
财务主管的岗位职责
2013/12/30 职场文书
三年级科学教学反思
2014/01/29 职场文书
低碳环保演讲稿
2014/08/28 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
聚会通知怎么写
2015/04/23 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
信用卡工作证明范本
2015/06/19 职场文书
学习十八大的感悟
2015/08/11 职场文书