vue 路由介紹

1.帶參數的路由

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}

2.嵌套路由 就是子路由

   在Apple組件下面加一個子組件Redapple

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

Redapple組件就是Apple組件的子組件,
渲染到父組件中，因此在父組件添加<router-view/>

3.<router-link></router-link>

4.router.push()

　router

5.路由視圖  路由map 路由導航

　　命名路由和命名視圖

6.重定向

export default new Router({
  mode: 'history', //去掉#
  routes: [
　　{
　　　　path:'/',
　　　　redirect:'/apple' //重定向 當訪問根路由的時候 重定向到訪問路由apple
　　},
    {
      path: '/apple/:color',
      name: 'Apple',
      component: Apple,
    },
  ]
})

7.<keep-alive>

　　<router-view/>

  </keep-alive>

切換過的組件被緩存起來，再也不從新加載