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 相关文章推荐
JS 参数传递的实际应用代码分析
Sep 13 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
Javascript实现单例模式
Jan 24 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
angular.js分页代码的实例
Jul 27 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
mpvue 单文件页面配置详解
Dec 02 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
JavaScript数组排序小程序实现解析
Jan 13 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
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 编程请选择正确的文本编辑软件
2006/12/21 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
srcElement表格样式
2006/09/03 Javascript
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
鼠标经过的文本框textbox变色
2009/05/21 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
python删除文件示例分享
2014/01/28 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
pycharm安装和首次使用教程
2018/08/27 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
python实现文字版扫雷
2020/04/24 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
中软国际Java程序员笔试题
2014/07/19 面试题
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
视光学毕业生自荐书范文
2014/02/13 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
优质护理心得体会
2016/01/22 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers