search

Home  >  Q&A  >  body text

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<template>

  <div id="app">

    <router-view></router-view>

  </div>

</template>

 

<script>

export default {

  name: 'app',

  data () {

    return {

 

    }

  }

}

</script>

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

component文件夹下有

1

2

3

-- index.vue

-- logon.vue

-- register.vue

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

目前我是这样写的

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<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


高洛峰高洛峰2992 days ago1169

reply all(2)I'll reply

  • 欧阳克

    欧阳克2016-11-12 09:07:39

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

    1

    2

    3

    4

    5

    6

    7

    8

    let router = new VueRouter({

        hashbang: true,

        history: false,

        saveScrollPosition: true,

        transitionOnLoad: true

    });

    import routerMap from './routers';

    routerMap(router);

    routers.js分开注册

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

            router.map({

                '/index':{

                    name:'index',

                    component:function (resolve) {

                        require(['index.vue'], resolve)

                    }

                }

            })

             router.map({

                '/login':{

                    name:'login',

                    component:function (resolve) {

                        require(['login.vue'], resolve)

                    }

                }

            })

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

    reply
    0
  • 三叔

    三叔2016-11-12 09:06:39

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

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


    reply
    0
  • Cancelreply