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 相关文章推荐
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
JavaScript中this详解
Sep 01 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
微信小程序支付PHP代码
Aug 23 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
js实现秒表计时器
Dec 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-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
jquery自定义表格样式
2015/11/23 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
Nodejs实现用户注册功能
2019/04/14 NodeJs
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
Python运用于数据分析的简单教程
2015/03/27 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
python实现简单的tcp 文件下载
2020/09/16 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
幼儿园教师的考核评语
2014/04/18 职场文书
村庄绿化方案
2014/05/07 职场文书
触电现场处置方案
2014/05/14 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript