路由表配置 - 爱码网

1、最基本的配置

const routes = [
  {path: \'/home\', component: HomePage},
  {path: \'/list\', component: ListPage},
  {path: \'/cart\' , component: CartPage},
  {path: \'/mine\' , component: MinePage}
];

2、默认路径可以通过redirect来重定向

const routes = [
  { path: \'/\' , redirect: \'/home\'}, 
  { path: \'/home\', name: \'home\' ,component: HomePage},
  { path: \'/list\', name: \'list\', component: ListPage},
  { path: \'/cart\', name: \'cart\' , component: CartPage},
  { path: \'/mine\', name: \'mine\' , component: MinePage},
  { path: \'/detail/:id/:name?\', name: \'detail\', component: DetailPage},
  // { path: \'*\', component: NotFoundPage}
];

3、可以通过*来处理404组件

4、组件切换，通过静态方式和动态方法

　　　　　　1、静态方式：<router-link>

　　　 <router-link to="/home">首页</router-link> &nbsp;|&nbsp;
      <router-link :to="\'/list\'">列表</router-link> &nbsp;|&nbsp;
      <router-link :to="{path: \'/cart\'}">购物车</router-link> &nbsp;|&nbsp;
      <router-link :to="{name: \'mine\'}">我的</router-link>

    通过acitve-class来指定激活样式或使用默认的样式,默认类名为 .router-link-active
    通过tag属性可以修改生成标签，默认生成标签为a

·　　　　　　2、动态方式: $router对象