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 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
javascript函数特点实例分析
May 14 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 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
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
使用js画图之饼图
2015/01/12 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
浅谈python内置变量-reversed(seq)
2017/06/21 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
基于Python中的yield表达式介绍
2019/11/19 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
Python列表推导式实现代码实例
2020/09/09 Python
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
投标保密承诺书
2014/05/19 职场文书
大一新生期末自我评价
2014/09/12 职场文书
大学生个人学习总结
2015/02/15 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL