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 年月日联动实现核心代码
Dec 21 Javascript
jquery一般方法介绍 入门参考
Jun 21 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
javascript中Object使用详解
Jan 26 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
React.js入门学习第一篇
Mar 30 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
Element Tooltip 文字提示的使用示例
Jul 26 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
第九节--绑定
2006/11/16 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python实现Linux下守护进程的编写方法
2014/08/22 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
美国知名生活购物网站:Goop
2017/11/03 全球购物
公务员转正鉴定材料
2014/02/11 职场文书
协议书范本
2014/04/23 职场文书
实习评语大全
2014/04/26 职场文书
立案决定书范文
2015/06/24 职场文书
Golang gRPC HTTP协议转换示例
2022/06/16 Golang
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android
mysql函数之截取字符串的实现
2022/08/14 MySQL