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

路由跳转全新页面

首先在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 子类调用 父类的构造函数

    class A(object): def __init__(self): self.nameaa = 'aa' def funca(self): print('function a %s' % sel ...

  2. python 读写sql2008 类

    import pymssql class MSSQL: def __init__(self,host,user,pwd,db): self.host = host self.user = user s ...

  3. 解决Git Clone速度过慢的方法

    Git Clone速度慢,原因很简单,默认的源是国外的,只需要使用国内源,速度就起飞了(当然,也没有太快,至少可以忍受了).使用方法很简单,在clone某个项目的时候将github.com替换为git ...

  4. windows程序快速启动的方式：WIN键+R

    WIN键+R是windows快速启动程序的一种方式,一般能独立运行的程序都能以这种方式启动.如notepad.calc.explorer等程序. 在命令行方式下explorer加上不同的参数,会得到不 ...

  5. python -- os处理模块

    # --------------------------------# 使用os模块操作目录和文件# --------------------------------# getcwd() 获取当前目录 ...

  6. 超详细！Vuex手把手教程

    目录 1,前言 2,Vuex 是什么 3,5大属性说明 4,state 4.1 直接访问 4.1 使用mapState映射 5,getters 5.1 先在vuex中定义getters 5.2 直接获 ...

  7. 如何修改product.product的display_name的显示,解决_rec_name失效的问题

    回顾学习 之前有讲解过display_name是怎么由来的,odoo会去取_rec_name的值,会将_rec_name的值赋值给display_name. class FandxProduct(mo ...

  8. nmcli命令行修改网络连接名称

    目前在网上能找到的文章中,使用nmcli命令修改Linux系统中网卡连接的名称都是先创建新的连接,然后删除旧的连接的方式 此种方式其实完全不恰当,简直就是在浪费时间,nmcli命令本身就提供了直接修改 ...

  9. 随处可编辑的编辑器之神VIM

    据说这世界上只有三种编辑器:Vim,Emacs 和 其他编辑器,其中 Vim 被称作编辑器之神,Emacs 被称作神的编辑器,当然,其他编辑器永远只能是其他编辑器. 拿一位 网友的话 来说,VIM 的 ...

  10. C语言复习(一)

    类型为void*的指针代表对象的地址,而不是类型 如果需要使用另一个源文件中定义的变量,那么只需要在定义变量前加上extern关键字 ex: extern int x;//x在其他文件中定义 左值表达 ...