vue的路由介绍

Posted 2020-10-26 Yuanzz-0816

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>

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