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数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
JS跨浏览器解析XML应用过程详解
Oct 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
PHP IPV6正则表达式验证代码
2010/02/16 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
python迭代器与生成器详解
2016/03/10 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
详解python运行三种方式
2019/05/13 Python
Python命令行click参数用法解析
2019/12/19 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
人事助理岗位职责
2013/11/18 职场文书
数学专业推荐信范文
2013/11/21 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
工程质量承诺书范文
2014/03/27 职场文书
2016新年慰问信范文
2015/03/25 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书