安装

npm install vue-router@3.5.2 -S

新建文件夹router 新建index.js

// 1.导入Vue和VueRouter包
import Vue from 'vue'
import VueRouter from 'vue-router'// 2.把VueRouter安装成Vue插件
Vue.use(VueRouter)// 3.创建路由的实例对象
const router = new VueRouter()// 4.对外共享路由的实例对象
export default router

在main.js中使用

import Vue from 'vue'
import App from './App.vue'
// 导入项目的路由模块 为了拿到router的实例对象
import router from '@/router/index.js'Vue.config.productionTip = falsenew Vue({render: h => h(App),// 在Vue项目中，要想把路由用起来，必须把路由实例对象，通过下面方式挂载// router：路由的实例对象router
}).$mount('#app')

---

 定义两种不同传值得跳转方式

 <router-link to="/movie/1">洛基</router-link><router-link to="/movie/2?name=zs&age=20">雷神</router-link>

路由

{ path: '/movie/:mid', component: Movie, props: true },

第一种取值方式 如下

<h3>Movie 组件 --- {{ $route.params.mid }} --- {{ mid }}</h3>

也可以通过属性 接受 

// 接收 props 数据

props: ['mid'],

第二种取值方式 如下

this.$route.query 来访问查询参数

在 this.$route 中，path 只是路径部分；fullPath 是完整的地址