文章目录

一、动态路由
- $route 和 $router 的区别
二、路由懒加载
- 2.1 认识路由的懒加载
- 2.2 懒加载的方式
三、嵌套路由
- 3.1 认识嵌套路由
四、router参数传递
- 4.1 传递参数的方式
- 4.1.1 params 的类型
- 4.1.2 query的类型
- 4.1.3 使用普通按钮的形式传递数据

一、动态路由

在某些情况下,一个页面的path路径可能使不确定的,比如我们进入用户界面时,希望如下的路径:
user/aaa 或者 user/lisi;除了有前面的/user之外,后面HIA跟上了用户的Id;这种path和Component的匹配关系,我们称之为动态路由(也是路由的传递数据的一种方式).

$route 和 $router 的区别

$router 为VueRoute实例,想要导航到不同的URL,则使用$router.push方法
$route 为当前router跳转对象里可以获取name,path,query,params等

在APP.vue中配置

测试数据结果:

二、路由懒加载

2.1 认识路由的懒加载

官方介绍:
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载;如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了.

详情解释:

首先,我们知道路由中通常会定义很多不同的页面
这个页面最后被打包的哪里呢? 一般情况下,是放在一个js文件中
但是,页面这么多放在一个js文件中,必然会造成这个页面非常的大
如果我们一次性从服务器请求下来的这个页面,可能需要花费一定的时间,甚至用户的电脑上还出现了短暂空白的情况.
如何避免这种情况呢? 使用路由懒加载即可

路由懒加载做了什么?

路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块
只有在这个路由被访问的到的时候,才加载对应的组件

2.2 懒加载的方式

方式一: 结合Vue的异步组件和Webpack的代码分析

const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};

方式二: AMD 写法

const About= resolve => require(['../components/About.vue'], resolve);

方式三: 在ES6 中,我们可以有更加简单的写法来组织和Webpack的代码分割

const Home = () => import('../components/Home.vue')

使用方式三进行懒加载的应用如图:

三、嵌套路由

3.1 认识嵌套路由

嵌套路由是一个很常见的功能:
比如在home页面中,我们希望通过/home/news 和 home/message 访问一些内容; 一个路径映射一个组件,访问这两个路径也会分别渲染两个组件.

路径和组件的关系如图所示:

实现嵌套路由有两个步骤:

创建对应的子组件,并且在路由映射中配置对应的子路由
在组件内部使用<router-view> 标签

设置默认新闻页

效果显示:

四、router参数传递

4.1 传递参数的方式

传递参数主要有两种类型: params 和 query

4.1.1 params 的类型

配置路由格式: /router/:id

传递的方式: 在path后面跟上对应的值

 {path: '/user/:abc',component: User}

传递后形成的路径:/router/123 ,/router/abc

实例配置：

页面中结果显示:

4.1.2 query的类型

配置路由格式: /router ,也就是普通配置
传递的方式: 对象中使用query的key作为传递方式
传递后形成的路径:/router?id=123 , /router?id=abc

页面传递打印数据如下:

4.1.3 使用普通按钮的形式传递数据

Vue -- vue-router(路由)的基本使用相关推荐

Vue+axios（interceptors）实现http拦截 + router路由拦截 (双拦截)+ 请求自带loading效果...
axios interceptors 拦截器 //interceptors.js// vue axios配置发起请求加载loading请求结束关闭loading // http request 请求 ...
四十三、在Vue使用router，路由的管理
@Author:Runsen @Date:2020/7/17 管理路由是一项必不可少的功能.今天,Runsen学习Vue Router. 文章目录安装Vue Router Vue Router使用 ...
vue 传递对象路由_vue 04 -vue路由对象（$route）参数简介以及和router的区别
vue路由对象($route) 在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以 ...
vue router 路由鉴权（非动态路由）
概述角色:超级管理员.主题管理员.数据服务管理员权限: 超级管理员:所有页面主题管理员:基础公共页面+主题设置页数据服务管理员:基础公共页面+数据服务设置页+数据服务审批页需求:角色菜单来自 ...
vue工程化与路由router
一.介绍 vue.js 是目前最火的前端框架,vue.js 兼具 angular.js 和 react.js 的优点,并剔除它们的缺点.并且提供了很多的周边配套工具如vue-router .vu ...
Vue Router 路由管理
文章目录 Vue Router 路由管理概述安装简单使用定义2个组件定义路由信息支持路由使用路由动态路由配置动态路由配置404 限制动态参数嵌套路由命名路由编程式导航简单使 ...
Vue学习之路由(Router)
Vue学习之路由(Router) 文章目录 Vue学习之路由(Router) 一.路由是什么? 二.Vue Router的安装 1.直接下载/CDN 2.NPM安装三.路由的基础使用 1.定义路 ...
【Vue】相关生态——Vue Router路由
Vue Router路由基本使用带参数的动态路由匹配捕获所有路由或404 Not found 路由嵌套路由编程式导航重定向和别名将props传递给路由组件不同的历史模式进阶导航守卫 ...
Vue Router路由常用功能总结
Vue Router路由常用功能总结一.前言二.安装 1. vueCLI安装 2. npm安装三.路由配置及使用: 1. 基本配置: 2. 动态路由: 3. 嵌套路由: 四.编程式的导航五.重 ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...

Vue -- vue-router(路由)的基本使用

文章目录

一、动态路由

$route 和 $router 的区别

二、路由懒加载

2.1 认识路由的懒加载

2.2 懒加载的方式

三、嵌套路由

3.1 认识嵌套路由

四、router参数传递

4.1 传递参数的方式

4.1.1 params 的类型

4.1.2 query的类型

4.1.3 使用普通按钮的形式传递数据

Vue -- vue-router(路由)的基本使用相关推荐

最新文章

热门文章

Vue -- vue-router(路由)的基本使用

文章目录

一、动态路由

$route 和 $router 的区别

二、路由懒加载

2.1 认识路由的懒加载

2.2 懒加载的方式

三、 嵌套路由

3.1 认识嵌套路由

四、router参数传递

4.1 传递参数的方式

4.1.1 params 的类型

4.1.2 query的类型

4.1.3 使用普通按钮的形式传递数据

Vue -- vue-router(路由)的基本使用相关推荐

最新文章

热门文章

三、嵌套路由