Vue Router路由插件

Vue Router，路由插件。

#要点

• hash模式和history模式的区别？
• 路由组件传参与props属性注入？
• 路由元信息meta，描述路由信息的字段对象。

---

---

#详解

# 关于，hash模式和history模式：

hash模式：不会发生页面跳转，路由在当前页面跳转。URL地址带有“#”，例如 http://yoursite.com/#/user，后端不用做处理。
histroy模式：会发生页面跳转，就像正常的 url。URL地址不带“#”，例如 http://yoursite.com/user，也好看！但是，需要后台配置支持。

new VueRouter({
  mode: 'hash',// histroy
  base: process.env.BASE_URL,
  routes
})

# 关于，路由组件传参与props属性注入：

• 当你不使用props属性的时候，代码冗余，高度耦合，还能忍？

// router 配置
const routes = [
  {
    name:'Router',
    path:'/router/:id',
    component:()=> import('./../views/router')
  }
]

// router-link链接
<router-link to="/router/9527?name=，我是9527">点击跳转</router-link>

// 跳转组件
<template>
<div>编号ID：{{$route.params.id}}{{$route.query.name}}</div>
</template>

• 使用props注入属性，低耦合代码，不香吗？

// router 配置

const routes = [
  {
    name:'Router',
    path:'/router/:id',
    props:function(route){
      return {
        id:route.params.id,
        name:route.query.name
      }
    },
    component:()=> import('./../views/router')
  }
  
]

// router-link链接
<router-link to="/router/9527?name=，我是9527">点击跳转</router-link>

// 跳转组件
<template>
  <div>
    编号ID：{{id}},{{name}}
  </div>
</template>

<script>
  export default {
    props:['id','name']    
  }
</script>

#关于，路由元信息meta

路由元信息meta，用于描述该路由信息的字段对象。可以存储一些路由信息、可以定义路由特有的属性，从而，区别与其他路由的不同之处。往往用于判断访问该页面需不需要登录啊？需不需要校验啊……诸如此类。代码如下：

// 配置
const routes = [
  {
    path: '/',
    name: 'Home',
    meta:{
      name:"首页",
      NeedLogin:true,
    },
    props:(route)=>{
      console.log(route);
    },
    component: ()=> import('./Home.vue')
  },
]

// 路由地址
http://localhost:3000/