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

问题描述

问 题

项目有一个主页面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

（网络有点问题，上传不了图片）

import VueRouter from "vue-router"

Vue.use(VueRouter);

import home from './component/home.vue'
import register from './component/register.vue'
import login from './component/login.vue'
import personal from './component/personal.vue'

const router = new VueRouter({
    bese:__dirname,
    routes:[
        {
            path:'/index',
            component:home
        },
        {
            path:'/register',
            component:register
        },
        {
            path:'/login',
            component:login
        },
        {
            path:'/personal',
            component:personal
        }
    ]
});


const app = new Vue({
  router: router,
  render: h => h(App)
}).$mount('#app')

问题是一开始我应该怎么把home.vue这个页面就加载进<router-view></router-view>里面

解决方案

添加路由规则文件route.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import IndexView from '../containers/IndexView';
import LoginView from '../containers/LoginView';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  scrollBehavior: () => ({ y: 0 }),
  routes: [
    { path: '/index', component: IndexView, name: 'index' },
    { path: '/login', component: LoginView, name: 'login' },
    { path: '/login/redirect/:redirect', component: LoginView, name: 'login' },
    { path: '*', redirect: '/index' },
  ],
});

实例化vue时引入

import Vue from 'vue';
import App from './App';
import store from './vuex/store';
import router from './router';

Vue.use(VueResource);

const app = new Vue({
  router,
  store,
  ...App,
});

app.$mount('#app');

这篇关于javascript - Vue 使用router 初始化第一个页面遇到的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！