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

路由代码跳转

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

动态路由

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

• /user/aaaa或者/user/bbbbbb

• 除了前面的/user之外。后面还跟上了用户的ID

• 这个path和component的匹配关系，我们称之为动态路由（也就是路由传递数据的一种方式）

• 具体实现如下：

• 我们得先创建一个对应的组件：
  

• 导入组件，将导入的组件配置成一一的映射关系
  

• App.vue中进行配置
  

• 如下：
  

• 显示效果为：

路由的懒加载

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

懒加载的作用

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

懒加载的方式

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

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

• 2.AMD写法

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

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

路由嵌套

实现步骤

• 创建对应的子组件，并且在路由映射中配置对应的子路由
• 在组件内部使用< router-view >标签
• 具体实现为：
  
  在我们所创建的子组件中协商相应的内容：
  
  接下来，进行路由和组件之间的映射关系：
  
  经过了如上步骤，我们所想要的效果并没有显示出来。
  必须经过下面的这个步骤：我们希望在主页面也就是我们的Home页面，那我们就需要在Home.vue中添加上< router - view>标签

<template>
  <div class="home">
<!--    <img alt="Vue logo" src="../assets/logo.png">-->
<!--    <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的知识比较多，也比较复杂，但是只要多点耐心，反复练习，掌握了原理和步骤，其实也就不复杂了。路漫漫，希望每一个不曾起舞的日子都不被辜负，慢慢沉淀1