当前位置 主页 > 网站技术 > 代码类 >

    vue设置一开始进入的页面教程

    栏目:代码类 时间:2019-10-29 06:06

    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设置一开始进入的页面教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持IIS7站长之家。