路由

路由是改造自官网路由，并加入ms-router-link和ms-router-view实现路由的嵌套和懒加载

路由书写

以下带星号的都是必须的

• path: 路径 *
• component: 组件 *
• redirect: 路径重定向
• title: 标题，用于修改浏览器标签页
• children: 子路由

export default new Router({
  routes: [{
    path: ['/', '/#'],
    redirect: '//index' //必须使用双斜杠,mmRouter的urlFormate过滤掉第一个斜杠
  }, {
    path: '/index',
    title: '首页',
    component: IndexPanel
  }, {
    path: '/router',
    title: '嵌套路由',
    component: RouterPanel,
    children: [{ 
      path: 'foo', 
      component: Foo 
    }, { 
      path: 'bar', 
      component: Bar,  
      children: [{ 
          path: 'baz', 
          component: Baz 
      }]
    }]
  }]
})

路由使用

ms-router-link

参数

• to: 路径
• text: 文本
• activeClass: 激活的class
• tag: 生成的节点，可选值a和li，默认值a

<ul>
  <li><ms-router-link :widget="[{to: '/router', text: '/'}]" /></li>
  <li><ms-router-link :widget="[{to: '/router/foo', text: '/foo'}]" /></li>
</ul>
<!--或者-->
<ul>
  <ms-router-link :for="nav in navs" :widget="[{to: nav.path, text: nav.title, activeClass: 'active', tag: 'li'}]" />
</ul>

<ms-router-view />

嵌套路由

应用界面中通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

/router/foo                           /router/bar
+------------------+                  +-----------------+
| router           |                  | router          |
| +--------------+ |                  | +-------------+ |
| | foo          | |  +------------>  | | bar         | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

<!--App组件顶层视图-->
<div id="app">
  <ms-router-view />
</div>

<!--Router组件是App次级视图-->
<div id="Router">
  <h1>router</h1>
  <ms-router-view />
</div>

<!--Foo组件是Router次级视图-->
<div id="foo">
  <h2>foo</h2>
</div>

<!--Bar组件是Router次级视图-->
<div id="bar">
  <h2>bar</h2>
</div>

import Router from './router'
import Foo from './router/Foo'
import Bar from './router/Bar'
export default new Router({
  routes: [{// 当 /router 匹配成功，Router 会被渲染在 App组件 的 <ms-router-view /> 中
    path: '/router',
    title: '嵌套路由',
    component: Router,
    children: [{ // 当 /router/foo 匹配成功，Foo 会被渲染在 Router组件 的 <ms-router-view /> 中
      path: 'foo', 
      component: Foo
    }, { // 当 /router/bar 匹配成功，Bar 会被渲染在 Router组件 的 <ms-router-view /> 中
      path: 'bar', 
      component: Bar
    }]
  }]
})

懒加载路由（异步路由）

只需要在引入组件时使用 AMD 风格的 require引入即可

const Foo = r => require.ensure([], () => r(require('./router/Foo')), 'group-router')
const Bar = r => require.ensure([], () => r(require('./router/Bar')), 'group-router')

不需要改变任何路由配置，跟之前一样