如何在vue2中配置vue-router

本文最后更新于54 天前，其中的信息可能已经过时，如有错误请发送邮件到cole36620@gmail.com

vue-router是vue官方的一个路由，利用这个，可以更方便的配置网页

接下来将阐述如何在vue2中配置vue-router

1.准备前工作

配置vue-router之前，需要确保电脑上已经配置Node.js并创建了vue-demo（没有Node.js也配置不了）

如果还未配置，先看之前的文章，进行补充，补充完后便可继续

如何在电脑上配置Node.js – gf的设计

如何在电脑上配置Vue2环境 – gf的设计

2.安装vue-router

由于目前学的是vue2,故外卖要安装router3版本，安装命令如下

npm install vue-router@3.6.5

3.配置index文件

安装完以后，在src目录下，新建一个router文件夹，在router文件夹中，新建立一个index.js文件

接着便可以配置index.js里面的内容，内容如下

import Vue from "vue";
import VueRouter from "vue-router";
import Footer from "@/components/Footer.vue";
import Main from "@/components/Main.vue";
import Header from "@/components/Header.vue";

Vue.use(VueRouter)

const router =new VueRouter({
    routes:[
        //这里配置你自己components组件里面的文件，我这里分别为Header，Main，Footer
        {path:'/main',component:Main},
        {path:'/header',component:Header},
        {path:'footer',component:Footer}
    ]
})

export default router

首先要引入Vue和VueRouter

import Vue from "vue";
import VueRouter from "vue-router";

然后添加你所需要的组件

import Footer from "@/components/Footer.vue";
import Main from "@/components/Main.vue";
import Header from "@/components/Header.vue";

然后全局注册VueRouter

Vue.use(VueRouter)

接下来创建实例并配置路由规则

const router =new VueRouter({
    routes:[
        //这里配置你自己components组件里面的文件，我这里分别为Header，Main，Footer
        {path:'/main',component:Main},
        {path:'/header',component:Header},
        {path:'footer',component:Footer}
    ]
})

注意：在vue2的vue-router中，写的是routes，写别的会显示不出来

导出规则

export default router

4.配置main.js文件

打开main.js文件，引入router即可，代码如下

import Vue from 'vue'
import App from './App.vue'
import router from './router'//1

Vue.config.productionTip = false

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

最后，再去App.vue中，输入