路由的安装顺序

安装-->导入-->注册-->创建-->挂载

安装：npm install vue-router@3

强制安装npm install vue-router@3 --force

导入：

import Vue from 'vue'
//导入路由
import VueRouter from 'vue-router'
//注册
Vue.use(VueRouter)
//创建路由实例
const router=new VueRouter()
Vue. config . productionTip = false
new Vue({
render: h => h(App),
//然后挂载
router: router
}) . $mount( '#app')

在main.js配置规则

Vue.use(VueRouter)//内部创建了router-view组件router-link组件

const router = new VueRouter({
    //定义路由规则
  routes: [
    {
      path: '/login',
      component: LoginComp
    },
    {
      path: '/',
      component: HomeComp
    }
  ]
})

在app.vue配置出口

<template>
  <div id="app">
    App组件
<!--路由出口-将来匹配的组件渲染地方-->
    <router-view></router-view>
  </div>
</template>
//这个必须修改路径才能跳转,所有下面的图片我们通过超链接点击跳转