1.安装 vue-router@3.5.1

2.创建 router文件夹并创建 index.js

3.引入VueRouter 和 Vue

4.Vue.use(VueRouter)

5.创建VueRouter实例： const router = new VueRouter（{ routes}）

6.配置routes （结构如下图所示）

7.导出router

8. 在main.js中导入刚才的 router

9.注册router

10.创建 router-link 和 router-view

具体有以下8个步骤

1 //1.导入VueRouter

import VueRouter from "vue-router";

2//2.使用路由

Vue.use(VueRouter);

3//3.创建VueRouter的实例

const router = new VueRouter({ // hash会让浏览器导航栏上有个#,history不会有。这两个区别不大 // mode:"hash", mode:"history", // base:"process.env.BASE_URL", routes })

4//4.配置路由的path和组件

const routes = [ { path: '/', name:"HomeList", component:HomeList }, { path: '/aboutlist', name:"AboutList", component:()=>import("../components/AboutList.vue") }, { path: '/blogvlog', name:"BlogVlog", component:()=>import("../components/BlogVlog.vue") }, ]

5//5.导入路由实例

export default router

6//6.引入导出的路由

import router from "./router/index"

7new Vue({

//7.注册路由 router, render: h => h(App), }).$mount('#app')

8

<router-link to="/">首页</router-link>
 <router-link to="/aboutlist">博客</router-link>
  <router-link to="/blogvlog">视频</router-link>

vue2中配置路由的步骤