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

路由跳转全新页面

首先在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对工作簿每个sheet表进行数据可视化展示（本案例是从第2个sheet开始循环读取也就是索引为1的表）

    # 导入相关模块from pyecharts.charts import Barfrom pyecharts import options as optsfrom pyecharts.charts i ...

  2. File类与常用IO流第一章File类

    第一章:File类 一.1个重点单词: file:文件:directory:文件夹/目录:path:路径(绝对路径:absolutePath) 二.4个静态成员变量: 1.static String ...

  3. box-shadow详解

    今天课堂上有学生问到box-shadow这个属性,那么下面我们就来详细的解说下这个属性它的用法,box-shadow是css3中的一个属性,它可以向框添加一个或多个阴影. 首先我们来看它的语法: bo ...

  4. springMVC-9-异常处理器和拦截器

    异常解析器: 用于统一处理 servlet 中的异常; 拦截器: 用于统一处理业务中需要统一处理的页面(比如登录判断等), 可抽取出来统一处理. 我们一般需要在每个页面都通过在session中寻找有无 ...

  5. Lesson 12 Life on a desert island

    Lesson 12 Life on a desert island desert island ['dezət 'ailənd] n. 荒岛 uninhabited island coral isla ...

  6. Vulnhub -- DC2靶机渗透

    信息收集 nmap开始扫描 只开了80端口,直接打开ip地址发现无法打开网页,但是进行了域名的跳转 !这里发现了一个问题,其实还开了一个7744端口,但是使用-sV的方式是扫描不出来的,使用-p-后可 ...

  7. ts踩坑笔记

    1.react中 this.el 报错 Property 'el' does not exist on type,添加el: any; 2.使用window.xx编译总是报错,用下面方法解决 let ...

  8. PS Lite - 源码解读

    PostOffice 类 /** * \brief 系统的中心. */ class Postoffice { public: /** * \brief 返回单例对象. */ static Postof ...

  9. （11）MySQL进阶篇SQL优化（InnoDB锁问题排查与解决）

    1.概述 前面章节之所以介绍那么多锁的知识点和示例,其实最终目的就是为了排查与解决死锁的问题,下面我们把之前学过锁知识重温与补充一遍,然后再通过例子演示下如果排查与解决死锁. 2.前期准备 ●数据库事 ...

  10. CF832D题解

    题目传送门 Description 给定一棵树上的三个点 \(a,b,c\),你要制定两条起点和终点都在这三个点中的路径,使得两条路径重叠的节点最多. Solution 感觉我的方法和大众不同,显然是 ...