组件之间的跳转

// 方法二
<router-link to="/src"></router-link>
// 方法三
this.$router.push("/src")

---

组件之间跳转(传递参数)——动态传值

• 明确发送方法和接受方
• 配置接受方路由地址

{path:"/src/:name",component:""}

• 接收方法获取传递数

this.$router.params.name

• 跳转时,传值3种:

// 方案一
this.$router.push("/main/参数");
// 方案二
<router-link to="/src/参数">;
// 方案三
this.$router.push({
    name:'路由名字',
    params:{参数}
})

静态传值

// router.js
{path:"",component:"",props:{key:"value"}}
// 获取
props:{
    key:{
        type:"String",
        default:""
    }
}

---

路由设置高级用法

• redirect 重定向

{path:"/productList",redirect:"list"}

• path:”*” 异常处理

{path:"*",component:NotFound}

---

路由嵌套

export default new Router({
    routes: [
        {
          path: '/index',
          name: 'Index',
          component: Index,
          children:[
              {
                  path: '',
                  name: '',
                  meta: {},
                  component:
              }
          ]
    ]
})

---

路由懒加载

• 路由懒加载，vue中配合webpack
• 如果不放path路由，组件将不会被加载

export default new Router({
    mode:'history'/'hash',
    routes:[
        {
            path:'',
            component:()=>import('组件的URl')
        }
    ]
})