专栏首页前端开发随笔Vue Router实现路由嵌套单页面展示

Vue Router实现路由嵌套单页面展示

实现单页面路由发生改变,页面不进行跳转 配置嵌套路由

import Vue from "vue";
import VueRouter from "vue-router";
import index from "../views/index.vue";

// 解决js路由跳转报错 Avoided redundant navigation to current location
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

Vue.use(VueRouter);

const routes = [{
  path: "/",
  name: "index",
  component: index,
  children: [{
    path: "/login",
    name: "login",
    component: () =>
      import( /* webpackChunkName: "login" */ "../views/login.vue")
  }, {
    path: "/regist",
    name: "regist",
    component: () =>
      import( /* webpackChunkName: "regist" */ "../views/regist.vue")
  }]
}, {
  path: "/person",
  name: "person",
  component: () =>
    import( /* webpackChunkName: "person" */ "../views/person.vue")
}, ];

const router = new VueRouter({
  routes
});
export default router;
<template>
  <div class="home">
    <div class="left">
      <h1 @click="goLogin()">登录</h1>
      <router-link to="/regist">
        <h1>注册</h1>
      </router-link>
    </div>
    <div class="right">
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goLogin() {
      this.$router.push({
        path: "/login"
      });
    }
  }
};
</script>
<style lang="less" scoped>
.home {
  display: flex;
}
.left {
  width: 30%;
  height: 700px;
  border-right: 5px solid #000;
  cursor: pointer;
}
.right {
  width: 70%;
  height: 700px;
}
</style>

END

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • VueRouter4.x适配Vue3

    wePanda
  • jQuery实现点击添加样式同胞移除样式

    wePanda
  • Css实现内容溢出添加横向滚动条

    wePanda
  • 深入理解 AMQP 协议

    原文链接:https://blog.csdn.net/weixin_37641832/article/details/...

    微风-- 轻许--
  • Vue cli入门 原

    最近看到一个vue cli入门的例子,写的非常详细,对入门vue cli很有帮助,原文链接

    tianyawhl
  • python3升级pip报错ImportError: cannot import name 'main'

    墨文
  • 讲讲如何让shell执行python命令的两种实用方法

    commands对Python的os.popen()进行了封装,使用SHELL命令字符串作为其参数,返回命令的结果数据以及命令执行的状态;

    菜鸟站长之家
  • 03.理解RabbitMQ消息通信中的基本概念

    当提到消息通信时,我们脑海里最先浮现的可能是邮箱和即时通信(IM),不过这些模型并非我们讨论的RabbitMQ消息通信。比如说,虽然AMQP(高级消息队列协议)...

    qubianzhong
  • VueRouter4.x适配Vue3

    wePanda
  • RocketMQ详解(10)——Consumer详解

    DefaultMQPushConsumer主要功能实现在DefaultMQPushConsumerImpl中,消息处理逻辑是在pullMessage()方法的P...

    张申傲

扫码关注云+社区

领取腾讯云代金券