VueRouter路由使用

VueRouter介绍

1. Vue自身的定位

渐进式JavaScript 框架,处理数据交互功能

2. Vue生态

Vue核心、VueRouter路由、Vuex状态机、UI组件库

3. VueRouter是什么？

专门用于管理vue项目的 业务组件 之间的关系 管理页面组件间的跳转

4. 为什么使用VueRouter？

中大型项目中，业务组件比较多，用路由管理组件关系更便捷

• 路径--路由--组件
• 域名--路由--网页

5. 如何使用vue-router？ 文档

使用VueRouter的流程 【非常重要】

文档

1. 引入路由

2. 创建组件

3. 创建路由对象

• 路由映射关系配置 路径----组件

4. 路由注入

5. 呈现组件

• router-view 想在哪里呈现组件，就在哪里写router-view

6. 切换路由

• router-link

vue-router的核心功能

动态路由匹配

路由参数传递 例如: 商品列表.vue---路由参数(id)---商品详情.vue

1. 设置形参

{  
  path:'/contact/:tel',
  component:Contact
}

2. 传递实参

<router-link to="/contact/13822334455">联系我们</router-link>

3. 提取使用

在组件的template区域直接提取使用   $route.params.形参名称
在组件的功能区域（created）中提取使用   this.$route.params.形参名称

路由嵌套

单层路由无法满足项目需求时，可以引入嵌套路由

1. 新建组件

2. 配置子路由

{  
  path:'/prod',
  component:Product,
  children:[
    {
      path:'/',
      component:P1
    },
    {
      path:'p2',  //此处的子路由，不能带 /
      component:P2
    }
  ]
},

3. 在主组件中呈现子组件

• 在主组件的template中，新增router-view

4. 切换路由

• router-link

编程式导航

通过事件的方式，触发路由的切换

1. 为菜单元素绑定事件

2. 在事件函数中，触发路由切换

// 方法1：只触发路由切换
this.$router.push(目标路径) 
// 方法2：编程式导航传参
this.$router.push({
  path:目标路径,
  query:{ 
    id:666  //自定义路由参数
  }
})

路由切换的方式选择

1. 如果使用router-link后，不影响项目布局结构，尽量使用router-link

2. 如果不太方便让结构渲染为a标签的话，可以使用编程式导航

命名路由

1. 为路由对象配置name

{  
  path:'/home',
  name:'h',
  component:Home
},

2. 可以使用name触发路由切换

this.$router.push({
  name:name,
  params:{  //刷新后会丢失
    num:100
  }
})