Vue-Router4和3对比

da       最近在跟着视频做后端开发入门的项目，学习视频中用Vue cli4搭建管理控台，在集成路由vue-router的时候遇到了问题 

 

       视频中使用的router3，而我的版本是router4,所以不能愉快地抄代码了，官方文档又看不懂。只能自己浅看了一下一些router最基础的用法。放上router3和router4的项目代码对照：

 router3:main.js

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

Vue.config.productionTip=false;

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

       

router4:main.js 

import { createApp } from 'vue'
import App from './App'
import 'jquery'
import router from './router.js'

createApp(App).use(router)
    .mount('#app')

router3:router.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from './views/login.vue'

Vue.use(Router)

export default new Router({
mode:'history',
base:process.env.BASE_URL,
routers:[{
    path:'/',
    redirect:'/login',
},{
    path:'/login',
    component:Login
}]
})

router4:router.js

import { createRouter, createWebHistory} from 'vue-router'
//import myLogin from './views/login.vue'
//import myAdmin from './views/myAdmin'
//const myLogin=import('./views/login.vue')


const routes=[{
   path:'/',
   redirect:"/login",
},{
    path: '/login',
    name:'myLogin',
     component:()=>import('@/views/login')
}]


const router = createRouter({
 base:process.env.BASE_URL,
  history: createWebHistory(),
   routes//定义的路由
})
//导出router
export default router

App.vue

<template>
<div id="App">
  <router-view/>
</div>
</template>
<!--这是最顶级的父页面-->
<script>
  export default {
    name:'App',
  }
</script>

myLogin.vue

<template>
    //...
</template>



<script >
    import $ from 'jquery'

    export default {
        name: 'myLogin',
        mounted(){
            $('body').removeClass('no-skin')
            $('body').attr('class', 'login-layout light-login');
        },
        methods:{
            login(){
                this.$router.push("/admin")
            }
        }
    }
</script>