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来承载子路由。