vue2: vue-router ​

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
const routes = [
  // { path: '/', component: HomePage }
];
const router = new Router({ routes });
new Vue({ router });

// 对应组件中使用 this.$router[fn] 即可
router.push(location, onComplate?, onAbort?)  // location: { name?: string, path?: string, query?: object, params?: object }
router.push(location).then(onComplate).catch(onAbort)
router.replace(location, onComplate?, onAbort?)
router.replace(location).then(onComplate).catch(onAbort)
router.go(n) // 正数为前进, 负数为后退
router.back() // 后退
router.forward() // 前进

// 简单路由
const routes = [
  { path: "/xxx", component: XXX }, // 简单的路由地址
  { name: "demo", path: "/xxx", component: XXX }, // 命名路由, 若 path 可能随着项目发生变化 或 过长等情况, 使用 name 替代更为方便, 注意 name 唯一
  { path: "/xxx/:xx", component: XX }, // 动态的路由地址, 冒号部分表示动态值(后面为参数名), 可以通过 `$route.params` 访问
  { path: "/user/:name/fav/:item", component: UserItem }, // 示例, 这里的 $route.params 为 { name: string, item: string }
  { path: '/*', redirect: '/404' }, // 重定向
  { path: '/demo', alias: '/example' }, // 别名 (如, 这里表示访问 '/example' 等于访问 '/demo', 但 url 地址保持为 '/example')
  { path: '/lazy', component: () => import(/* webpackChunkName: "Lazy" */ './Lazy.vue') }, // 懒加载
  { path: '/meta', meta: { xxx: 'xx' } } // 元信息, 可以在 $route.matched 中筛选后访问
  { path: '/note', component: Note, props: { mode: 'read' } } // props
];
// 嵌套路由
const routes = [
  {
    path: '/user',
    component: User,
    children: [ // 注意: 子路由 path 会以父级路径为基路径, 若以 '/' 开头则会当作更路径
      { path: 'star', component: XX }
      { path: 'item', component: XX }
    ]
  }
];
/**
 * 命名视图 - 若需在同级路由展示多个视图, 可以使用多个 `<router-view name="" />`, 这里的 'name' 对应此处配置的 components 属性名
 * 如: 此处视图为 `<router-view />`、`<router-view name="aside">`、`<router-view name="footer">`
 */
const routes = [
  {
    path: '/multiViews',
    components: {
      default: Main,
      aside: Aside,
      footer: Footer
    }
  }
];

$route.name; // 路由 name
$route.path; // 当前路径
$route.fullPath; // 当前路径, 包含 query 和 hash
$route.params; // 动态路由的动态地址信息
$route.query; // 跳转地址携带的 query 信息
$route.hash; // 跳转地址携带的 hash 信息
$route.redirectedFrom; // 重定向的来源地址
$route.matched; // 匹配的当前路由的所有嵌套路径片段的路由记录

/**
 * history 模式
 * - 默认为 'hash' 模式, 路由内容放在 '#' 后面
 * - 'history' 模式, 路由表现为常规模式, 但需要服务端支持, 需要针对地址访问忽略 path 的解析, 直接返回 index.html
 */
const router = new VueRouter({
  mode: "history",
  routes: [],
});

const router = new VueRouter({
  routes: [],
  scrollBehavior(to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    return to.hash ? { selector: to.hash } : savedPosition || { x: 0, y: 0 };
  },
});

const router = new VueRouter({}); // 配置略
/**
 * 全局前置守卫 .beforeEach
 */
router.beforeEach((to, from, next) => {
  // ...
  next(); //确保要调用 next 方法，否则钩子就不会被 resolved。
});
/**
 * 全局解析守卫 .beforeResolve
 * 在导航被确认之前, 同时在所有组件内守卫和异步路由组件被解析之后触发
 */
router.beforeResolve((to, from, next) => {});
/**
 * 全局后置守卫 .afterEach
 */
router.afterEach((to, from) => {
  //没有next方法
});

const routes = [
  {
    name: "home",
    path: "/",
    component: Home,
    // 在进入路由前触发, 参数同全局前置守卫
    beforeEnter(to, from, next) {
      // ...
    },
  },
];

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`, 因为当钩子执行前，组件实例还没被创建
    // 可以传递回调函数给 next 访问组件实例
    next(vm => {
      /** do something */
    });
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`, next 中不接收回调
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`, next 中不接收回调
    // 通常用来禁止用户在还未保存修改前突然离开, 通过 `next(false)` 来取消导航
  },
};