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 相关文章推荐
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
javascript清空table表格的方法
May 14 Javascript
js实现延迟加载的方法
Jun 24 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
es6函数name属性功能与用法实例分析
Apr 18 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实现网站插件机制的方法
2009/11/10 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
Python argv用法详解
2016/01/08 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
linux面试题参考答案(2)
2015/12/06 面试题
出纳的岗位职责
2013/11/09 职场文书
教师求职信范文分享
2013/12/27 职场文书
音乐教学反思
2014/02/02 职场文书
4s店活动策划方案
2014/08/25 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
玄武湖导游词
2015/02/05 职场文书
学校工会工作总结2015
2015/05/19 职场文书
现货白银电话营销话术
2015/05/29 职场文书
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python