Vue-Router(二)：路由实例构建选项及传值

[Toxicfy]

构建Router选项

实际上在使用 Vue Router 构建 router实例的时候，参数不仅仅是一个 routes 配置参数，主要是在全局设定路由模式、自定义激活样式以及定义滚动行为，这里翻阅了官网对应部分的 Api 并展示如下：

const router = new VueRouter({
  routes,
  base: "/app/", // 默认为'/' ; base的路径加在所有的路径前面 ex：/user:id => /app/user:id

  // 关于路由模式
  mode: "hash", // 浏览器端:hash(defalut)/history ; Node.js: abstract
  fallback: true, // 当mode:history且浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式

  // 可以用于进行对<router-link>组件进行设置自定义样式;
  // 可以设置激活的class类名，以及包含在父级下的精确激活类名: 下面展示的是默认值
  linkActiveClass: "router-link-active", 
  linkExactActiveClass: "router-link-exact-active",

  // 当路由进行跳转时候如果保存过滚动信息的话，可以在完成路由跳转时候完成页面的滚动
  scrollBehavior: (to, from, savedPosition) => {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  }

  // parseQuery / stringifyQuery  -- 提供自定义查询字符串的解析/反解析函数
});

通过路由传递参数

router = [
  {
    path: "/user/:id",
    component: User,
    props: true,
    name: "user", // name 可以使得在使用router-link 、 router.push 传入对象 {name: user} 直接访问
    meta: {
      // 元信息，在访问路由对象的时候可以进行访问，可以配合路由导航守卫
      title: "User component",
      description: "this is user component"
    }
  }
];

通过 params 的方式传递参数，这样我们拿到 this.$route 也就是当前的路由对象，所以很容易完成参数的传递; 但是我们这样获取到的动态参数其对应路由形成高度耦合,这样当前的组件便不能进行复用;

所以我们会设置 props 的方式解耦动态参数的获取，不用从路由对象获取;

此时 route.params 或者 会作为组件的属性直接被访问，这样也完成了组件和 Url 的解耦; 对于设置 props 的值的不同，在组件中的使用也略有不同：

//  path: "/user/:id", props: true,  ---- 布尔值

const User = {
  props: ["id"],
  template: "<div>User {{ id }}</div>"
};

// { path:'/login', component:Login, props: { userName: 'Tom'} }  --- 对象
const Login = {
  props: ["userName"],
  created() {
    console.log(this.userName);
  }
};

// 当返回函数的时候可以接收一个参数，就是包含路由信息的route对象，同样的我们在组件中进行访问属性。
const propFun = route => ({
  userName: "Tom",
  age: route.parame.age
});

router = {
  path: "/login",
  component: Login,
  props: propFun
};

// /login/?age=20  =>  {userName: "Tom", age:20}