vue vue-router步骤

vue vue-router步骤

1. 在src目录下创建router文件夹，在router文件夹下新建index.js文件

2. 下载vue-router插件,注意版本问题，版本过高可能会报错，我目前vue版本2.6.14，vue-router版本下载的3.2.0，可自己参考下载对应版本

npm i vue-router

3. 在index.js中，编写步骤

//1.引入vue
import Vue from "vue"
//2.引入vue-router
import VueRouter from "vue-router";
//3.注册vue-router
Vue.use(VueRouter);
//4.路径
const routes = [
  {
    path: "/",
    name: "loginSystem",
    redirect: "/loginSystem"
  },
  {
    path: "/index",
    name: "index",
    component: () => import("@/views/index.vue"),
    children: [
      {
        path: "home",
        name: "home",
        component: () => import("@/views/home/home.vue"),
      },
    ],
  },
];
//4.创建
const router = new VueRouter({
  mode: 'history',//模式
  base: "/home",//根路径
  routes,
});
//5.共享
export default router;

4. 在main.js中引入router全局注册

import router from './router';
在new Vue实例中添加router

6. 在app.vue中

<router-view></router-view>```