Vue 使用router 初始化第一个页面遇到的问题

Question

项目有一个主页面App.vue 结构

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {

    }
  }
}
</script>

项目目录结构有一个文件component文件夹 用来存放路由需要跳转的各个子页面

component文件夹下有

-- index.vue
-- logon.vue
-- register.vue

我想让页面初始化的时候，路由自动跳转到index.vue

目前我是这样写的

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {

    }
  },
  created:function(){
       this.$router.push('index'); // 页面加载时跳转
  }
}
</script>

这样的方法虽然行得通，但是总觉得怪怪的，比如我一开始进入页面时 地址是 localhost/#/index

然后我跳转到 localhost/#/login

这时跳转到登录页面

如果我按下F5进行刷新，会跳回 localhost/#/index

有没有什么办法可以按下刷新之后继续停留在localhost/#/login

Answer 1

建议换一种方式注册路由，新建一个文件routers.js。引用时候这样

let router = new VueRouter({
    hashbang: true,
    history: false,
    saveScrollPosition: true,
    transitionOnLoad: true
});
import routerMap from './routers';
routerMap(router);

routers.js分开注册

        router.map({
            '/index':{
                name:'index',
                component:function (resolve) {
                    require(['index.vue'], resolve)
                }
            }
        })
         router.map({
            '/login':{
                name:'login',
                component:function (resolve) {
                    require(['login.vue'], resolve)
                }
            }
        })

这样每个页面都执行各自的代码

Answer 2

路由使用方法不正确，你这样和没有使用路由没有什么不同

https://router.vuejs.org/zh-cn/index.html