vue2 element ui 动态加载路由菜单 firstLevelMenu

router-link属性补充

在前面的 <router-link> 中，我们只是使用了一个属性:to，用于指定跳转的路径
<router-link> 还有一些其他属性：

tag:

<router-link to="/home" tag="button">首页</router-link

tag可以指定 <router-link> 之后渲染成什么组件，比如上面的代码会被渲染成一个button按钮，而不是默认的a标签。

replace:

<router-link to="/home" replace>首页</router-link>

replace 不会留下 history 记录，所以指定 replace 的情况下, 后退键返回不能返回到上一个页面中。vue源码中用的是history.pushState()，所以默认是可返回的，加上replace属性就相当于改成了history.replaceState()。

active-class:

当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个 router-link-active 的class。

设置active-class可以修改默认的名称：

<router-link to="/home" active-class="active">首页</router-link>

修改成功：

如果想同时修改多个，可以通过给router实例添加linkActiveClass属性进行修改：

const router = new VueRouter({
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})

通常不会修改类的属性，会直接使用默认的router-link-active即可。

编程式路由

之前的路由跳转用的是<router-link to='...'>的方式。有时候页面的跳转可能需要执行对应的js代码，这时候就可以使用编程式路由的跳转方式。

$router属性来自创建出来的router实例：const router = new VueRouter({…})

或者使用replace的方式(不能返回)：

// this.$router.replace('/about')
this.$router.replace('/home')

动态路由

动态路由简单来解释就是，比如有一个商品的详情页，我们通过id的不同来展示不一样的商品页面，此时就需要在url上定义一个参数，用这个参数来获取商品的id，根据id的不同来请求不一样的数据。

首先在router/index.js里定义动态路径：

定义动态参数：

效果：

$route.params.userId是用来获取动态路由参数的，其中$route是指当前处于活跃状态的那个路由，活跃状态就是指当前显示(使用的)哪个组件，比如上例中点击user后，user这个组件及其路由就是处于活跃状态。

路由懒加载

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

首先，我们知道路由中通常会定义很多不同的页面，这些页面最后被打包后一般情况下是放在一个js文件中，这么多页面放在一个js文件中，必然会造成这个页面非常的大，如果我们一次性从服务器请求这个页面，可能需要花费一定的时间甚至会出现页面短暂空白。

如何避免这种情况呢？使用路由懒加载就可以了，懒加载顾名思义就是用到的时候再加载。

路由懒加载做了什么？

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

懒加载的三种方式：

1.结合 Vue 的异步组件和 Webpack 的代码分析(了解)

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

2.AMD写法(了解)

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

3.ES6写法

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

使用方法(es6)：

打包后对比：