1.安装路由

npm install vue-router --save

2.配置路由对应的组件

3.配置路由文件

在src同级目录下配置一个router.js文件

import Vue from "vue"
import VueRouter from "vue-router"
//使用路由插件
Vue.use(VueRouter)
//导入组件
import login from "./components/Login.vue"
import register from "./components/Register.vue"
//配置路由，在不同路由下匹配不同的组件内容
const router=new VueRouter({
    routes:[
        {
       path:"/login",
       component:login
    },
    {
        path:"/register",
        component:register 
     }
]
})
//将配置好的路由对象导出
export default router

4.将路由对象导入口文件，并注册

//这里直接引入，引入的是
import Vue from "vue/dist/vue.js"
// import login from "../components/login.vue"
import App from "./App.vue"
//导入路由
import router from "../router"
const vm=new Vue({
    el:"#app",
    data:{
        msg:"hello vue"
    },
    components:{
       app
    },
    render(h) {
        return h(App)
    },
  //注册路由
    router
})

5.在app.vue文件中显示组件

<template>
 <div>
<h1>测试App根组件</h1>
//匹配对应路由
<router-link to="/login">来到登录</router-link>
<router-link to="/register">来到注册</router-link>
//显示对应组件内容
<router-view></router-view>
 </div>
</template>