vue-router

1、定义组件：router-link定义子路由路径，router-view给子路由占位

// 定义 APP 根组件
      const App = {
        template: `<div>
          <!-- 头部区域 -->
          <header class="header">传智后台管理系统</header>
          <!-- 中间主体区域 -->
          <div class="main">
            <!-- 左侧菜单栏 -->
            <div class="content left">
              <ul>
                <li><router-link to="/users">用户管理</router-link></li>
                <li><router-link to="/rights">权限管理</router-link></li>
                <li><router-link to="/goods">商品管理</router-link></li>
                <li><router-link to="/orders">订单管理</router-link></li>
                <li><router-link to="/settings">系统设置</router-link></li>
              </ul>
            </div>
            <!-- 右侧内容区域 -->
            <div class="content right"><div class="main-content">
              <router-view />
            </div></div>
          </div>
          <!-- 尾部区域 -->
          <footer class="footer">版权信息</footer>
        </div>`,
      };

2、创建路由对象，routes数组里定义路由映射规则：{path:"/",component:App},表示将路径“/”映射为App组件。

// 创建路由对象
      const router = new VueRouter({
        routes: [
          {
            path: "/",
            component: App,
            //redirect将“/”重定向到"/users"子组件，此时App和/users同时存在。
            redirect: "/users",
            children: [
              { path: "/users", component: Users },
              //定义 resful风格的路由参数
              { path: "/userinfo/:id", component: UserInfo, props: true },
              { path: "/rights", component: Rights },
              { path: "/goods", component: Goods },
              { path: "/orders", component: Orders },
              { path: "/settings", component: Settings },
            ],