Vue 2 路由指南从基础到高级用法举例

npm install vue-router@3.6.5
# 或者
yarn add vue-router@3.6.5

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';
// 使用 Vue Router
Vue.use(VueRouter);
// 定义路由规则
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];
// 创建路由实例
const router = new VueRouter({
  mode: 'history', // 使用 HTML5 历史模式
  routes
});
export default router;

import Vue from 'vue';
import App from './App.vue';
import router from './router';
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

<template>
  <div>
    <h1>Vue Router 示例</h1>
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

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

<template>
  <div>
    <h2>用户详情</h2>
    <p>用户 ID：{{ $route.params.id }}</p>
  </div>
</template>

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      {
        path: 'child',
        component: Child
      }
    ]
  }
];

<template>
  <div>
    <h2>父组件</h2>
    <router-view></router-view>
  </div>
</template>

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

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

<router-link :to="{ name: 'About' }">关于</router-link>

this.$router.push({ name: 'About' });

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