vue源码学习第八篇--Vue-router学习

Vue-router介绍
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表；模块化、基于组件的路由配置；路由参数、查询、通配符；基于 Vue.js 过渡系统的视图过渡效果；细粒度的导航控制；带有自动激活的 CSS class 的链接；HTML5 历史模式或 hash 模式，在 IE9 中自动降级；自定义的滚动条行为。

由 前端 来控制页面的跳转（但其实是个单页面），根据不同的 url 地址展示不同的内容和页面。
优点：体验好，不需要每次从服务器获取全部，快速展现给用户；
缺点：不利于SEO；使用浏览器的前进，后退键的时候会重新发送请求，没有合理的利用缓存；单页面无法记住之前滚动的位置，无法在前进和后退的时候记住滚动的位置。

安装和使用vue-router

步骤一: 安装vue-router

npm install vue-router --save

步骤二: main.js中引入
Vue-router 核心

在vue-router中, 定义了两个标签<router-link> 和<router-view>来对应点击和显示部分。<router-link> 就是定义页面中点击的部分，<router-view> 定义显示部分，就是点击后，区配的内容显示在什么地方。
路由跳转的方式
<router-link to=' '></router-link> 和 this.$router.push({path:' '})
当使用对象作为路由的时候，to前面要加一个冒号,表示绑定

动态路由匹配

上面我们定义的路由，都是严格匹配的，只有router-link 中的to属性和 js 中一条路由route中 path 一模一样，才能显示相应的组件。 但有时现实却不是这样的，当我们去访问网站并登录成功后，它会显示 欢迎你，+ 你的名字。不同的用户登录， 只是显示“你的名字” 部分不同，其它部分是一样的。这就表示，它是一个组件，假设是user组件。不同的用户（就是用户的id同），它都会导航到同一个user 组件中。这样我们在配置路由的时候，就不能写死, 就是路由中的path属性，不能写死，导航到 user 组件，路径中肯定有user, id 不同，那就给路径一个动态部分来匹配不同的id. 在vue-router中，动态部分 以 : 开头，那么路径就变成了 /user/:id, 这条路由就可以这么写： { path:"/user/:id", component: user }.
　我们定义一个user组件，页面中再添加两个router-link 用于导航， 最后router.js中添加路由配置，来体验一下
　
　app.vue 中添加两个router-link：

<!--  增加两个到user组件的导航，可以看到这里使用了不同的to属性 -->
      <router-link to="/user/123">User123</router-link>
      <router-link to="/user/456">User456</router-link>

router.js 配置user动态路由：

const routes = [
  
    /*新增user路径，配置了动态的id*/
    {