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弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
jQuery功能函数详解
Feb 01 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
three.js 制作动态二维码的示例代码
Jul 31 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输出汉字的函数的分析
2006/10/09 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
js查找父节点的简单方法
2008/06/28 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
Python实现抢购IPhone手机
2018/02/07 Python
django 发送手机验证码的示例代码
2018/04/25 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
教师个人鉴定材料
2014/02/08 职场文书
法人任命书范本
2014/06/04 职场文书
买房协议书范本
2014/10/23 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
在 Python 中利用 Pool 进行多线程
2022/04/24 Python
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL