之前也在网找了一些答案，比较零碎，特此总结下，废话不多说，直接上干货！

路由跳转全新页面

首先在app.vue中先定义router-view，这是主路由。

在router的index.js中引入login首页模板，配置首页模板路由

再在main.js中配置默认展示页面

在login.vue中配置点击事件，添加跳转路由，则跳转到subject页面，subject组件也需要像login页面一样在router中的index.js中配置路由，则跳转全新页面则已完成。

二级路由配置

配置二级页面之前遇到的原因

subject页面则是此页面，开始没想到路由嵌套，配置和一级login路由是同级的，则我点击左边菜单时，路由则跳转到新的页面，对此找了很多资料，才无意中发现是没有嵌套路由，因为vue是单页应用得原因，所有模板页面都是在app.vue中渲染的，所以我点击左边菜单栏时，也默认的把右边模板页面渲染到app.vue中，才造成将右边的模板页面渲染到一个全新的页面。

二级页面的嵌套

因为之前我们登录页面跳转到到了subject模板页面，所以在subject模板中要进行当前页面路由跳转，就应该将左侧导航的路由配置成subject模板的子路由，如图所示，则点击导航，内容就显示在右侧，不会再跳转全新的页面。

在做此项目之前也捣鼓了vue一段时间，但是真正做项目时又出现了很多问题，技术在于实践，可能写的不是很到位，一些原理讲的不是很清楚，希望大牛看到了勿喷，以后如果有更深入的理解，会加以改正，也希望理解比较深入的小伙伴提出意见，希望大家都能共同进步！

vue爬坑之路1-路由跳转全新页面以及二级页面配置的更多相关文章

  1. Vue 爬坑之路（十二）—— vue-cli 3.x 搭建项目

    Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vu ...

  2. Vue 爬坑之路（六）—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...

  3. Vue 爬坑之路（九）—— 用正确的姿势封装组件

    迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...

  4. Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...

  5. Vue 爬坑之路（十一）—— 基于 Nuxt.js 实现服务端渲染（SSR）

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...

  6. Vue 爬坑之路（三）—— 使用 vue-router 跳转页面

    使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vue ...

  7. （转）Vue 爬坑之路（三）—— 使用 vue-router 跳转页面

    使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vue ...

  8. Vue 爬坑之路（七）—— 监听滚动事件 实现动态锚点

    前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑 ...

  9. Vue 爬坑之路（五）—— 组件进阶

    组件(Component)是 Vue.js 最强大的功能之一,之前的文章都只是用到了基本的封装功能,这次将介绍一些更强大的扩展. 一.基本用法 在使用 vue-cli 创建的项目中,组件的创建非常方便 ...

随机推荐

  1. Python (paramiko) 连接Linux服务器

    目录 参考资料 Paramiko 安装 连接Linux 文件上传/下载 文件封装 其他 参考资料 https://www.liujiangblog.com/blog/15/ https://blog. ...

  2. P3203 弹飞绵羊-分块

    P3203 弹飞绵羊-分块 观察数据范围,发现可以分块.只需要处理每个点跳出所在块后的位置和次数即可.目的是为了加速查询并降低修改复杂度. 对于修改,重构整个块内信息即可. 时间复杂度正确的一批 具体 ...

  3. P4169-CDQ分治/K-D tree（三维偏序）-天使玩偶

    P4169-CDQ分治/K-D tree(三维偏序)-天使玩偶 这是一篇两种做法都有的题解 题外话 我写吐了-- 本着不看题解的原则,没写(不会)K-D tree,就写了个cdq分治的做法.下面是我的 ...

  4. Gos Log每次查询响应后自动清理临时文件，优化磁盘空间

    客户端清理 logc/controllers/file/file.go 压缩后清理原始文件 //压缩成功后 删除原文件 os.Remove(src) 返回后清理压缩文件 defer func() { ...

  5. odoo14里自定义批量下载数据【excel】

    1.创建一个向导模型: from odoo import models, fields, api import base64 import xlwt from io import BytesIO cl ...

  6. 第四十九篇 -- 添加联系人信息Addcontact

    往通讯录里添加联系人 首先,在清单文件里添加读写权限 <uses-permission android:name="android.permission.READ_CONTACTS&q ...

  7. windows下python -m pip install --upgrade pip升级后报错的解决方法

    前言: 笔者装某库的时候提示需要升级pip版本,就python -m pip install --upgrade pip默认升级了,结果升级之后只要输入pip就有报错(如下图),网上百度了很多解决方法 ...

  8. Mac搭建Vue开发环境

    1.安装Homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/ ...

  9. 【java基础】枚举

    目录 枚举的定义 枚举的使用 原理 枚举的扩展 单例模式 避免反射攻击 反序列化 策略模式 总结 枚举的定义 public enum Color { Red,Blue,Green; } 枚举的使用 C ...

  10. .NET5控制台程序使用EF连接MYSQL

    .NET5控制台程序使用EF连接MYSQL 1.使用nuget下载: Microsoft.Extensions.Configuration.Json Pomelo.EntityFrameworkCor ...