vuejs学习与总结——路由vue-router深入

路由代码跳转

我们知道，路由的跳转可以通过路由跳转方式一
有时候，页面的跳转可能需要执行对应的JavaScript代码，这个时候就需要我们使用第二种跳转方式了

动态路由

在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，我们希望是以下的路径：

• /user/aaaa或者/user/bbbbbb
• 除了前面的/user之外。后面还跟上了用户的ID
• 这个path和component的匹配关系，我们称之为动态路由（也就是路由传递数据的一种方式）
• 具体实现如下：
• 我们得先创建一个对应的组件：
  
• 导入组件，将导入的组件配置成一一的映射关系
  
• 中进行配置
  
• 如下：
  
• 显示效果为：

路由的懒加载

• 官方解释为：包构建应用时，JavaScript包会变得非常大，影响页面的加载
• 当然，如果我们能够把不同的对应的组件分割为不同的板块，然后当路径访问的时候才加载对应组件，主要就会比较高效
• 首先，我们知道路由中通常会定义很多的页面，H这些页面，一般情况下，是放在一个js文件中，但是，如果很多页面同时放到js文件中，必然会造成这个页面非常的大，如果我们一次性从服务器请求下来这个页面，可能需要花费一些是啊金，设置用户的电脑会出现空白的现象。如果想避免这种情况，使用懒加载就可以了。

懒加载的作用

是将路由对应的组件打包为一个个Js代码，只有在这个路由被访问的时候，才加载对应的处组件

懒加载的方式

• 1.结合Vue的异步组件和webpack的代码分析

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

constAbout= resolve=>required(['../components/'],resolve);

• 3.在ES6中，我们可以有更加简单的方式来组织Vue的异步组件和Webpack的代码分割
  const Home = () => import('../components/')

路由嵌套

实现步骤

<template><div class="home"><!--<img alt="Vue logo" src="../assets/">--><!--<HelloWorld msg="Welcome to Your Vue.js App"/>--><h2>我是首页</h2><p>我是首页内容，，，，，</p><router-link to="/home/news">新闻 </router-link><router-link to="/home/message">消息</router-link><router-view/></div>

vue-router参数传递

传递参数主要有以下两种方式：

params的类型

• 配置路由格式：/router/:id
• 传递的方式在path后面跟上对应的值
• 传递后形成的路径：/router/aaa,/router/abc

query的类型

• 配置路由格式：/router,也就是普通配置
• 传递的方式：对象中使用query的key作为传递方式
• 传递后形成的路径：/router？id=aaa./router?id=abc
  具体实现为：

<router-link :to="{path:'/profile',query:{name:'yiya',height:'189',age:'19'}}">档案</router-link>

实现效果：

总结

vue-router的知识比较多，也比较复杂，但是只要多点耐心，反复练习，掌握了原理和步骤，其实也就不复杂了。