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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
jQuery输入城市查看地图使用介绍
May 08 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
Vue父子组件传值的一些坑
Sep 16 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
使用PHP Socket写的POP3类
2013/10/30 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
Python 条件判断的缩写方法
2008/09/06 Python
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Python 文件管理实例详解
2015/11/10 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
Django添加feeds功能的示例
2018/08/07 Python
python脚本后台执行方式
2019/12/21 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
工程力学专业毕业生求职信
2013/10/06 职场文书
小学二年级学生评语
2014/04/21 职场文书
鲁迅故居导游词
2015/02/05 职场文书
人事任命通知
2015/04/20 职场文书
重阳节简报
2015/07/20 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
工作一年自我鉴定
2019/06/20 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python
java调用Restful接口的三种方法
2021/08/23 Java/Android