router-view的使用方法

序言

开发的时候有时候会遇到一种情况，比如 ：点击这个链接跳转到其他组件的情况，通常会跳转到新的页面，但是我们不想跳转到新页面，只在当前页面切换着显示，那么就要涉及到路由的嵌套了，也可以说是子路由的使用。

在需要嵌套的页面的路由地址中添加children属性,添加对应的路径

使用方法

rounter.js

代码如下:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import Index from '../views/index.vue'
import a from '../views/a/a'
import b from '../views/b/b'
import c from '../views/c/c'

const routes = [
  {
    path: '/',
    name: 'index',
    component: Index,
    children: [
      { path: 'a', name: 'a', component: a },
      { path: 'b', name: 'b', component: b },
      { path: 'c', name: 'c', component: c },
      { path: '/', name: 'a', component: a}
      // path表示的为 / 默认路径显示的是a组件
    ],
  },
]

const router = new VueRouter({
  routes,
})

// 取消 路由重复 报错
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
export default router

主页面index.js

代码如下:

<template>
  <div style="background-color:#F5F7F9;height:100%" class="flex">
    <!-- 侧面菜单 -->
    <Menu idDivProp="shift" v-on:address="getAddress"></Menu>
    <router-view></router-view>
  </div>
</template>

<script>
import Menu from '../components/menu'
export default {
  components: {
    Menu,
  },
  data() {
    return {
    }
  },
  methods: {
    //页面跳转
    jumpPage(value) {
      this.$router.push(value)
    },
    getAddress(value) {
      this.jumpPage(value)
    },
  },
  created() {},
  mounted() {},
}
</script>

<style lang="scss" scoped></style>

在组件Menu中返回给主页面index.js地址参数用于切换router-view

menu组件

返回给主页面index.js的地址参数的方法:

  deliverAddress(value) {
      let key = value.key
      switch (key) {
        case '1': //点击a
          this.$emit('address', 'a')
          break

        case '2': //点击b
          this.$emit('address', 'b')
          break

        case '3': //点击c
          this.$emit('address', 'c')
          break

        default:
          break
      }
    },

最后

也可使用组件router-link跳转,具体可参考如下文献:

• vue之router-view组件的使用
• vue-router 设置默认路由

__EOF__

本文作者：damarkday知识库
本文链接：https://www.cnblogs.com/GoodMemoryBlog/p/14332618.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！