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>

切换过的组件被缓存起来，不再重新加载

原文地址：https://www.cnblogs.com/Home-Yzz/p/8534705.html