06 vue router(一)

一、vue route是什么？

     Vue Router是vue.js官方的路由管理器。主要有以下几种功能

     1、路由和视图表的配置。（已明白）

     2、模块化和基于组件的路由配置。（已明白）

     3、路由参数、查询、通配符。（已明白）

     4、基于Vue.js过渡系统的视图过渡效果

     5、颗粒度的导航控制。

     6、带有自动激活的CSS class的链接。

     7、Html5历史模式或hash模式，在IE9中自动降级。

     8、自定义滚动条行为。

二、创建一个基本的路由

     路由如名，他是地址和模板之间的关系。    

const routes= new Router({
  routes: [
     {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/HelloWorld/:id',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'*',
      name:'Nofind',
      component:Nofind
    }    
  ]
});

  一个$route的属性：

       1、path

        字符串，等于当前路由对象的路径，会被解析为绝对路径，如“/”,"/Home"。

      2、params

      对象，包含路由中动态片段和全匹配片段的键值对。

      

        3、query

       对象，包含路由中查询参数的键值对。?后面的query参数

       

        4、route

        路由规则所属的路由器（以及其所属的组件）。

       5、matched

        数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象.

 

       6、name

        当前路径的名字，如果没有使用具名路径，则名字为空

      三、嵌套路由

      嵌套路由就是路由中的路由，路径的子路径。

      PS：父路由节点，一定要有router-view来承载子路由。