Vue Router 4与路由管理实战

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

const routes = [
  { 
    path: '/', 
    component: () => import('../views/Home.vue')
  },
  { 
    path: '/about', 
    component: () => import('../views/About.vue')
  }
];

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

<template>
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
</template>

// 在 Vue 组件的 methods 中
methods: {
  navigateToAbout() {
    this.$router.push('/about');
  }
}

const routes = [
  // 动态路径参数以冒号 `:` 开头
  { path: '/user/:userId', component: User }
];

export default {
  computed: {
    userId() {
      return this.$route.params.userId;
    }
  }
}

const routes = [
  {
    path: '/user/:userId',
    component: User,
    children: [
      // 当 /user/:userId 匹配成功后，会渲染 User 组件，
      // User 组件内部会渲染嵌套的 <router-view>，显示 UserPosts
      {
        path: 'posts',
        component: UserPosts
      },
      // ...其他子路由
    ]
  }
];

<template>
  <div>
    <h2>User {{ userId }}</h2>
    <router-view></router-view> <!-- 子路由匹配到的组件将在这里渲染 -->
  </div>
</template>

// 注册一个全局前置守卫
router.beforeEach((to, from, next) => {
  // to 和 from 都是路由信息对象
  // next 是一个函数，必须调用它来 resolve 这个钩子
  next(); // 确保一定要调用 next()
});

const routes = [
  {
    path: '/foo',
    component: Foo,
    beforeEnter: (to, from, next) => {
      // 在进入路由前执行的逻辑
      next();
    }
  }
];

export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于 /foo/bar 路由来说，当 /foo/baz 导航时，
    // 由于两个路由都渲染同一个 Foo 组件，因此这个守卫会被调用
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    next();
  }
}

const Foo = () => import('./Foo.vue');

const routes = [
  { path: '/foo', component: Foo }
];

const routes = [
  {
    path: '/bar',
    component: () => import(/* webpackChunkName: "group-bar" */ './Bar.vue')
  }
];

const routes = [
  { path: '/search', component: Search }
];

export default {
  computed: {
    query() {
      return this.$route.query;
    }
  }
}

const routes = [
  { path: '/user/:id', component: User }
];

export default {
  computed: {
    userId() {
      return this.$route.params.id;
    }
  }
}

const routes = [
  {
    path: '/foo',
    component: Foo,
    meta: { requiresAuth: true }
  }
];

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

export default {
  beforeRouteEnter(to, from, next) {
    // 在进入路由前获取数据
    fetchData().then(() => {
      next();
    });
  }
}

/src
  /router
    index.js // 路由配置文件
  /views // 视图组件
    Home.vue
    About.vue
  /components // 可复用组件
    Header.vue
    Footer.vue
  App.vue
  main.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

const Home = () => import(/* webpackChunkName: "home" */ '@/views/Home.vue');
const About = () => import(/* webpackChunkName: "about" */ '@/views/About.vue');

if (user.role === 'admin') {
  router.addRoute({
    path: '/admin',
    component: Admin,
    meta: { requiresAdmin: true }
  });
}

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAdmin && !isAdmin) {
    next('/');
  } else {
    next();
  }
});

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    currentRoute: null
  },
  mutations: {
    setCurrentRoute(state, route) {
      state.currentRoute = route;
    }
  },
  actions: {
    updateRoute({ commit }, route) {
      commit('setCurrentRoute', route);
    }
  }
});

router.beforeEach((to, from, next) => {
  store.dispatch('updateRoute', to);
  next();
});

<template>
  <div>
    <router-link v-for="route in breadcrumbs" :key="route.path" :to="route.path">
      {{ route.name }}
    </router-link>
  </div>
</template>

<script>
export default {
  computed: {
    breadcrumbs() {
      const currentRoute = this.$store.state.currentRoute;
      // 根据当前路由生成面包屑
      // ...
    }
  }
}
</script>

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  // 路由配置数组
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

router.beforeEach((to, from, next) => {
  // ...
});

router.addRoute({
  path: '/new-route',
  component: NewRouteComponent,
});

router.replace('/new-route');

router.push('/new-route');

router.go(-1); // 后退一步
router.go(1); // 前进一步

console.log(router.currentRoute.value); // 当前路由对象

const resolvedRoute = router.resolve('/path');

router.addRoutes([
  // 路由配置数组
]);

const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue');