vue-router - vue.js 主页面组件替换或跳转

问题描述

问 题

我是前端新手，最近公司要求研究vue.js，现在遇到一些困难。是页面跳转的一些问题，已经看了一天了，试了很多方法。网上我也没搜索到有用的东西。我这就直接贴代码了

<template>
  <div class="container">
    <app-header></app-header>
    <app-main></app-main>
    <app-footer></app-footer>
  </div>
</template>

<script>

  import AppHeader from './Header'
  import AppFooter from './Footer'
  import MainPage from './Main'

  export default {
    components: {
      'app-header': AppHeader,
      'app-footer': AppFooter,
      'app-main': MainPage
      }
  }
</script>

上面这一段是主页面，由三个组件组成的，就是头部底部加上一个中间内容，然后我现在需要在一些按钮的点击方法中实现页面跳转。实现的效果就是中间的主视图跳转，然后头部和底部不变。想问一下·app-main·里面直接是一个页面的html，css，js。

还有在官方文档中看了router-view什么的，也没明白怎么用，大家要是知道的可以给个思路吗？

我在路由配置文件中将要跳转的页面设置成了home的子路由。

import About from 'components/About';
import Home from 'components/Home';
import Hello from 'components/Hello.vue';
import InfoModify from 'components/InfoModify';

export default {
  '/about':{//访问地址
    name:'about',//定义路由的名字。方便使用。
    component:About,//引用的组件名称，对应上面使用`import`导入的组件
    //component:require("components/app.vue")//还可以直接使用这样的方式也是没问题的。不过会没有import集中引入那么直观
  },
  '/home': {
    name:'home',
    component: Home,
    subRoutes:{
      '/infoModify': {
        name:'infoModify',
        component: InfoModify
      }
    }
  },
  '/hello': {
    name:'hello',
    component: Hello
  },
}

然后在mian.vue里面一个v-link

<a class="dt4" v-link="{'name':'infoModify'}">3333333</a>

弹出来的页面是在下方的，这个时候，上方的额页面怎么隐藏掉呢？

解决方案

目前我是这么解决的，将home.vue里面的

<template>
  <div class="container">
    <app-header></app-header>
    <app-main></app-main>
    <app-footer></app-footer>
  </div>
</template>

改成了

<template>
  <div class="container">
    <app-header></app-header>
    <router-view></router-view>
    <app-footer></app-footer>
  </div>
</template>

在主页的script里面加入了

created: function () {
  const router = this.$router;
  router.go({path:'/home/main'});
}    

之后把全局重定向设置为

router.redirect({
  '*':"/home/main"
});    

这样就能顺利的跳转了，然后点击首页的时候也能跳转到首页，并且顶部与底部都能出现。

这篇关于vue-router - vue.js 主页面组件替换或跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！