路由表配置

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对象