vue vue-router步骤
- 在src目录下创建router文件夹,在router文件夹下新建index.js文件
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f3f0fb3231bb1696b61e40bdf495d361.png)
- 下载vue-router插件,注意版本问题,版本过高可能会报错,我目前vue版本2.6.14,vue-router版本下载的3.2.0,可自己参考下载对应版本
npm i vue-router
- 在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;
- 在main.js中引入router全局注册
import router from './router';
在new Vue实例中添加router
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d5adfb654eef3e08f29295277442b7c5.png)
- 在app.vue中
<router-view></router-view>```