vue-router 路由嵌套显示不出来_Vue-前端路由

一、路由的基本概念

路由的本质就是对应关系，在开发中，分为前端路由和后端路由。

1. 后端路由

概念：根据不同的用户 URL 请求，返回不同的内容

本质：URL 请求地址与服务器资源之间的对应关系

• 后端路由有性能问题，Ajax前端渲染提高性能，但是不支持浏览器的前进后退操作
• SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作
• SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求）
• 在实现SPA过程中，最核心的技术点就是前端路由

2. 前端路由

概念：根据不同的用户事件，显示不同的页面内容

本质：用户事件与事件处理函数之间的对应关系

2.1 实现简易版前端路由

占位符是动态显示的部分

<

Vue

// 定义组件

显示：

二、Vue Router 路由管理器

官网：https://router.vuejs.org/zh/

• 支持HTML5 历史模式或 hash 模式
• 支持嵌套路由
• 支持路由参数
• 支持编程式路由
• 支持命名路由

1. 基本使用

1. 引入相关的库文件
2. 添加路由链接
3. 添加路由占位符
4. 定义路由组件
5. 配置路由规则并创建路由实例
6. 把路由挂载到 Vue 根实例中

<!-- 1.导入 vue 文件 -->

显示：

2. 路由重定向

路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C 。

通过路由规则的 redirect 属性，指定一个新的路由地址。

更改上个案例，只添加了一句

const 

显示：

3. 嵌套路由

<

显示：

4. 动态匹配路由

<

显示：

更方便的使用请求参数id

如果 props 被设置为 true，route.params 将会被设置为组件属性

<

显示：与上一个相同

使用更多参数

<

显示：

5. 路由命名

给路由命名后，链接更简单

<

显示：与上一个相同

6. 编程式导航

• 声明式导航：通过点击链接实现导航的方式，叫做声明式导航

例如：普通网页中的 <a></a> 链接 或 vue 中的 <router-link></router-link>

• 编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航

例如：普通网页中的 location.href

常用的编程式导航 API 如下：

• this.$router.push('hash地址') 跳转到指定页面
• this.$router.go(n) -1 后退一页 1 前进一页

<

显示：