手写vue-router

1、写出路由规则(index.js配置)

import Vue from 'vue'
import VueRouter from 'vue-router'
// import HomeView from '../views/HomeView.vue'
// import AboutView from '../views/AboutView.vue'
Vue.use(VueRouter)

const routes = [
    {
        path: "/",
        name: "HomeView",
        // component: HomeView
        component: () => import('../views/HomeView.vue') //懒加载设置,需要这个组件时，才开始调用
    },
    {
        path: "/aboutview",
        name: "AboutView",
        // component: AboutView
        component: () => import('../views/AboutView.vue')
    }
]

const router = new VueRouter({
    mode: 'history',
    // linkExactActiveClass
    routes
})

export default router

2、引入挂载路由

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

3、使用路由(App.vue所有组件的父组件) [声明式]

<template>
  <div>
      <router-link to="/">HOME</router-link> |
      <router-link to="/aboutview">ABOUT</router-link>
      <router-view></router-view>

      //to 路径，与路由规则中声明路径一样
      //tag <router-link></router-link>相当于a标签，可以使用tag更改默认标签，如tag="h2"
      //target 跳转方式，如target="_blank",新页面跳转
      //replace 不会向history添加新的历史记录，所以浏览器前进与后退按钮无用
  </div>
</template>