概览

2023-03-17 | 2024-06-10 | 318 | 1 分钟

要实现一个前端路由，需要三个部分

路由映射表：一个能表达 url 和组件关系的映射表，可以使用 Map、对象字面量来实现；
匹配器：负责在访问 url 时，进行匹配，找出对应的组件；
历史记录栈：浏览器平台已经原生支持，无需实现，直接调用接口；

路由基础使用

import Vue from 'vue'
import VueRouter from '../vue-router'
// 1.安装插件
Vue.use(VueRouter)

// 2.定义路由组件
const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 3.实例化 vue-router
const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: Home },
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar },
    ]
})

// 4. 创建并挂载到根 vm 实例上
new Vue({
    router, // 注入router实例
    template: `
        <div id="app">
          <h1>Basic</h1>
          <ul>
            <li><router-link to="/">/</router-link></li>
            <li><router-link to="/foo">/foo</router-link></li>
            <li><router-link to="/bar">/bar</router-link></li>
        </ul>
          <router-view class="view"></router-view>
        </div>
      `
}).$mount('#app')