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

---

一、动态路由

在某些情况下,一个页面的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 使用普通按钮的形式传递数据