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

路由跳转全新页面

首先在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. 极致简洁的微前端框架-京东MicroApp开源了

    前言 MicroApp是一款基于类WebComponent进行渲染的微前端框架,不同于目前流行的开源框架,它从组件化的思维实现微前端,旨在降低上手难度.提升工作效率.它是目前市面上接入微前端成本最低的 ...

  2. Tomcat修改最大连接数及查看最大连接数

    一.背景 公司进行安全整改, 技术要求:会话限制:应能够对应用系统的最大并发会话连接数进行限制: 提供凭证:提供对系统最大并发会话连接数进行限制的截图,需要将所有被检查系统中间件配置截图,如果不限制最 ...

  3. 运行ride.py报错，闪退

    报错信息如下: F:\Python3.8\Scripts>python ride.py<class 'robotide.preferences.configobj.UnreprError' ...

  4. odoo里面条件写法

    attrs="{'invisible': ['|', ('probability', '>', 0), ('active', '=', True)]}"/>. 写法gt ...

  5. Docker run 命令参数及使用

    Docker run 命令参数及使用 Docker run :创建一个新的容器并运行一个命令 语法 docker run [OPTIONS] IMAGE [COMMAND] [ARG...] OPTI ...

  6. 论文笔记：（CVPR2019）PointWeb: Enhancing Local Neighborhood Features for Point Cloud Processing

    目录 摘要 一.引言 二.相关工作 3D数据表示 点云深度学习 三.我们的方法 3.1 自适应特征调整(AFA)模块 3.1.1 影响函数fimp 3.1.2 关系函数frel 3.1.3 逐元素影响 ...

  7. QT经验（一）——按钮长按事件分析

    引言 最近在做qt项目,需要对button按钮添加一个长按事件(比如点击按钮,开始运动.松开按钮,运动停止).查了些许资料,(差点误把QPushButton的press信号和长按事件混淆)在此记录一下 ...

  8. Linux的链接(入门)

    Linux的链接分为两种:硬链接和软链接 硬链接:如果B是A的硬链接,那么B和A指向同一个文件,但是删除A并不会影响B->允许一个文件有多个路径 软链接:类似Windows下的快捷方式,删除原文 ...

  9. 单片机学习（五）LCD1602和矩阵键盘的使用

    目录 LCD1602的使用 矩阵键盘的使用 矩阵键盘相关电路图 按键检测扫描 制作密码输入器 LCD1602的使用 首先LCD1602是外接在开发板上的液晶屏外设,如图所示: 我们主要使用它来代替动态 ...

  10. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)

    实际项目中遇到的需求 同一个链接需要加载不同的页面组件.根据用户所购买服务的不同,有不同的页面展现. 有一些不好的实现方式 直接把这几个组件写在同一个组件下,通过v-if去判断.如果这么做的话,甚至可 ...