本文共 3262 字，大约阅读时间需要 10 分钟。

Vue Router������������������������

������ Vue Router ������������ Vue ������������������������������������������������������������������������������ Vue Router ������������������

1. ������ Vue Router

������������������������ Vue Router������������������������������������������

npm install vue-router@next

��������������� ��������������������������������� Vue CLI ��������������������������������� Vue Router ��������������������������������� Vue.use ������������

2. ������ Vue Router

��������������������������������������� Vue Router������������������������������������ main.js ��� App.vue���������������������������������������

a. ������ Vue Router

��������� Vue ��������������� Vue Router ���������������

import { createRouter, createRoute } from 'vue-router'
// ��������������� API ������������
const router = createRouter({
  // ������������������������������������������
})
// ��������������� Vue ������
export default {
  router,
  data() {
    return {
      // ������������������
    }
  },
  methods: {
    // ������...
  }
}

b. ������������������

��� router ������������������ index.js���������������������������������������

import Home from '../components/Home'
import About from '../components/About'
const router = createRouter({
  routes: [
    {
      path: '/',
      redirect: '/home',
      name: 'home'
    },
    {
      path: '/home',
      component: Home
    },
    // ������������������...
  ],
  mode: 'history'
})
// ������������������
router afterEach((to, from) => {
  console.log('������������������������...')
})

c. ��������� Vue ������

��������� Vue ������������������������

new Vue({
  el: '#app',
  router,
  render: () => h(App)
})

3. ������ Router ������

������������Using router-link ������������������������

a. ���������������

������������������������������������������������������������ $router ���������

4. ������������������

��� router/index.js ���������������������������������������������

import Home from '../components/Home'
const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      meta: {
        title: '������'
      }
    },
    {
      path: '/user/:userId',
      component: User,
      meta: {
        title: '������'
      }
    }
  ]
})
// ������������������
router beforeEach((to, from) => {
  console.log('������������������.')
})

5. ������������

������������������������������������������������������

router beforeEach((to, from) => {
  console.log('������������.')
})

������������������������������������������

router afterEach((to, from) => {
  console.log('���������������.')
})

6. ��� App.vue ���������������

������������ App.vue ��������������������������������������������� main.js ��������������������������������������� Vue ������������App.vue ���������������������������������������������

7. ������������������

������������������������������������������������������������������������������

router.use((err, navigate) => {
  console.log('���������������.')
  navigate('/');
})

��������������������������������������� index.js ��� router/index.js ���������������������������������������������������������������������������������������������������������������������