1.npm安装路由  在项目中输入以下命令 安装全局路由

npm install vue-router -S

安装之后在项目文件package.json内会出现 "vue-router": "^3.5.2" 

2.在src内新建router目录 添加index.js作为总路由

// 引入依赖
import Vue from 'vue'
import VueRouter from 'vue-router'// 使用路由中间件
Vue.use(VueRouter)// 懒加载引入组件
const index = () => import('../page/index.vue')// 路由表
const routes = [{path: '/',component: index,meta: {title: '首页'}
}, ]// 修改路由模式
const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})//暴露
export default router

3. 在mian.js中引入刚刚改好的index.js文件 并添加到vue实例中

···
import router from './router'···new Vue({router:router,···
}

4.在app.vue中添加路由出口 <router-view></router-view> 这是一个会变的组件 url不同 他就变成不同的组件 变化的规则就是路由表的内容

<template><div id="app"><!-- <img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"/> --><!-- 路由视图图 --><router-view></router-view></div>
</template>

5.router和route的区别：

router是全局路由对象，负责全局事务，可以用来跳转等，除了routes还有其他的属性和方法

route是局部路由对象，当前页面或组件的路由，用来获取信息