vue 路由介绍

export default new Router({
  mode: ‘history‘, //去掉#
  routes: [
    {
      path: ‘/apple/:color‘,
      name: ‘Apple‘,
      component: Apple
    },
  ]
})
apple路由页面必须加上参数否则匹配不到页面，带引号的都是参数  :color
也可以是这样的 /apple/:color/detail/:type
通过this.$route.param 获取参数  参数为{color:red,type:animal}

export default new Router({
  mode: ‘history‘, //去掉#
  routes: [
    {
      path: ‘/apple/:color‘,
      name: ‘Apple‘,
      component: Apple,
　　　　children:[
　　　　　　{
　　　　　　　　path:‘/redapple‘,
　　　　　　　　component:Redapple
　　　　　　}
　　　　]
    },
  ]
})

Redapple组件就是Apple组件的子组件,
渲染到父组件中，所以在父组件添加<router-view/>

export default new Router({
  mode: ‘history‘, //去掉#
  routes: [
　　{
　　　　path:‘/‘,
　　　　redirect:‘/apple‘ //重定向  当访问根路由的时候 重定向到访问路由apple
　　},
    {
      path: ‘/apple/:color‘,
      name: ‘Apple‘,
      component: Apple,
    },
  ]
})