想利用暑假时间好好学习一下vue，会记录每一天的学习内容。
今天是学习vue的第11天！
起起伏伏乃人生常态，继续加油～
学习内容
1. router-link属性
在前面的<router-link>中，我们只是使用了一个属性：to，用于指定跳转的路径
<router-link to="/Home">首页</router-link>
<router-link to="/About">关于</router-link>
<router-link>还有一些其他属性
tag
tag：可以指定<router-link>之后渲染成什么组件，如果不想要其默认渲染出的<a>，比如渲染成<button>
<router-link to="/Home" tag="button">首页</router-link>
<router-link to="/About" tag="button">关于</router-link>
replace
replace：不会留下history记录，所以指定replace的情况下，浏览器的后退键被禁用，无法返回到上一个页面中(默认应该用的是pushState())
active-class
active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个类为router-link-active
- 某些需要高亮显示的导航菜单可能会使用到该类
可以在<router-link>中设置active-class可以修改默认名称
<router-link to="/Home" tag="button" replace active-class="active">首页</router-link>
<router-link to="/About" tag="button" replace active-class="active">关于</router-link>
也可以通过在router实例中设置linkActiveClass修改默认名称
（但是通常不会改类名，直接叫router-link-active就好）
2. 通过代码跳转路由
有时候，页面的跳转可能需要执行对应的一些js代码，这时候就可以使用第二种跳转方式：
这里使用了.$router.push()，同样也可以用.$router.replace()，效果是一样的，只是无法后退页面
但是这样还有一个小问题，就是当我们重复点击同一个导航时，控制台会报出错误。
大概是vue为了避免重复点击相同路由的一种警告机制(?，虽然不会影响页面效果，但是放着不管也不太好。解决方法应该不少，我这里通过在代码中加了判断句来解决：
3. 动态路由
在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户个人界面时，希望是如下的路径：
- /user/aaaa或/user/bbbb
- 除了有前面的
/user之外，后面还跟上了用户的ID - 这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)
具体实现
在路由映射配置中添加如下配置：
:后的名字可以自取，不一定是UserId
使用<router-link>，to属性是用于指定链接，我们这里的链接其实应该不是固定的，比如/User/后接的应该是某个用户的id，所以应该用v-bind动态绑定to属性：
（/User/在此处是固定的，放单引号里就ok）
特别??一下：data是个函数，不要写成对象！
成功显示：
如果想把这个URL上的userid显示在页面中：在User.vue中利用$route.params
看一下目前会显示什么
我们想拿到的是这个对象的值，所以应该改为：
{{$route.params.UserId}}
这个params后面接的也就是我们在路由映射配置中的:后的名字：
当然了这个url中的userid也可以通过location对象获取，再截取就好了
这里只是提供一种方法
4. 路由的懒加载
当打包构建应用时，Javascript包会变得非常大，影响页面加载
- 如果我们能把不同路由对应的组件分割成不同的代码块，然后
当路由被访问的时候才加载对应组件，这样会更高效
说得通俗点：
我们知道路由中通常会定义很多不同的页面，一般情况下页面是放在一个js文件中，但是那么多的页面放在一个js文件中，必然会造成这个页面非常大
如果我们一次性从服务器请求下来这个页面，可能需要花费一定的时间，甚至用户屏幕可能出现短暂的空白
要避免这种情况，使用路由懒加载就可以了
路由懒加载：
- 主要作用是将路由对应的组件打包成一个个的js代码块
- 只有在这个路由被访问到的时候，才加载对应的组件
懒加载的方式
方式一：结合Vue的异步组件和Webpack的代码分割
（早期写法，不推荐，认识即可）
const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};
方式二：AMD写法
const Home = resolve => require(['../components/Home.vue'], resolve);
方式三：在ES6中，我们可以有更简单的写法来组织Vue异步组件和Webpack的代码分割
const Home = () => import('../components/Home.vue');
这里我们选用ES6的方式：
（但我统一放到了上面，便于一起管理）
然后再打包文件，对比未使用懒加载之前的dist文件夹，会发现新生成的dist文件夹中多了6个文件，应该就是三个组件及其对应的map文件
前：
后：
5. 嵌套路由
嵌套路由是个很常见的功能：
- 比如在home页面中，我们希望通过
/home/news和/home/message访问一些内容，也就是在之前的基础上更加细分 - 由于一个路径映射一个组件，因此访问这两个路径也会分别渲染两个组件
路径和组件的关系如下：
实现嵌套路由的步骤：
- 第一步：创建对应的子组件，并且在路由映射中配置对应的子路由
- 第二步：在组件内部使用
<router-view>标签
具体实现
我们就实现上面那个例子：
第一步：
先创建两个组件文件：
配置路由映射：
要放在组件Home的对象里（注意news和messages跟其他组件并不是同级关系）
使用这个children属性来放一些子组件，同样也是一个映射关系一个对象
????：子路由的路径不要加斜杠，也不用加/Home啥的
(同样也采用路由的懒加载)
第二步：
我们需要用<router-view>来显示这两个子组件，那么应该把它放在哪里？
此时放在App.vue显然是不合适的，因为这个<router-view>是负责显示父级导航的内容
应该把它放在这两个子组件的父组件，Home.vue文件中，而且要使用一下<router-link>来当导航
现在已经可以成功切换并显示了：
但是依然有不足，这个问题上面也提到过，当显示Home页时，也应该要将新闻页默认显示出来
其实就是配置路由的默认路径，在前面我们已经学过，只是子组件是放在children属性里，父组件是放在routes属性里
6. 路由的参数传递
当我们切换组件时，我们可能希望传递一些参数
传递参数的方式
传递参数主要有两种类型：params和query
params类型：
- 配置路由映射的格式：
/router/:id - 传递的方式：在
to属性指定的链接后面，要跟上对应的值 - 传递后形成的路径：/router/123，/router/abc
query类型：
- 配置路由映射的格式：
/router，也就是正常配置不用变 - 传递的方式：在对象中使用
query的key作为传递方式 - 传递后形成的路径：/router?id=123，/router?id=abc
params类型其实前面userid那里用过，这里就用query类型：
(我新建了一个Profile组件，并且已经做好了相关配置，跟前面一样的操作)
然后如果想要传递参数，to属性的值不能是个字符串了，必须是个对象，而且注意要用v-bind动态绑定to属性，才能使对象生效
path属性自然就是要跳转的链接，而query属性对应的也是一个对象
<!-- <router-link to="/profile">档案</router-link> -->
<router-link :to="{path: '/profile', query: {name: 'AIpoem', age: 19, height: 1.88}}">档案</router-link>
可以看到路径已经成功变化了：
如果想拿到query：
用$route.query就可以
(同理，params用$route.params)
如果进行跳转的时候，不是通过<router-link>，而是通过代码跳转呢？
比如这里用一个button，希望在跳转的同时传递一些数据过去：
<button @click="profileClick">档案</button>
还记得上面的$router.push吗？
同理可得：只是这里要传一个对象进去
profileClick() {
this.$router.push({
path: '/profile',
query: {
name: 'AIpoem',
age: 19,
height: 1.88
}
})
}