我们实现一个简单的vue路由跳转案例，案例项目结构图如下所示：

实现步骤： 1.创建导航栏公共视图组件. 在views/commons下创建myheader.vue

<template>
    <div>
        登录 | 注册
    </div>
</template>

<script>
    export default {
        name: "myheader"
    }
</script>

<style scoped>
   h3{
       color: lightseagreen;
   }
</style>

2.创建三个视图组件 在views目录下创建Welcome.vue,分别在views/admin和views/users下创建admin.vue和users.vue.

Welcome.vue

<template>
    <div>
        <p>
            Welcome Page!
        </p>
        <ul>
            <li><a href="/users">用户管理模块</a></li>
            <li><a href="/admin">后台管理模块</a></li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Welcome"
    }
</script>
<style scoped>
</style>

admin.vue

<template>
    <div>
        <myheader></myheader>
        <h1>后台管理模块</h1>
    </div>
</template>

<script>
    import myheader from '@/views/commons/myheader'
    export default {
        name: "admin",
        components:{
            myheader
        }
    }
</script>

<style scoped>
</style>

users.vue

<template>
    <div>
        <myheader></myheader>
        <h1>用户管理模块</h1>
    </div>
</template>

<script>

    import myheader from '@/views/commons/myheader'
    export default {
        name: "users",
        components:{
            myheader
        }
    }
</script>

<style scoped>

</style>

3.在router目录下分别创建管理模块和用户模块的路由配置。 在router/modules目录下创建admin.js和users.js

admin.js

export default [
    {
        path: '/admin',
        name: 'admin',
        component: resolve => require.ensure([], () => resolve(require('@/views/admin/admin')), 'admin')
    }
]

users.js

export default [
    {
        path: '/users',
        name: 'users',
        component: resolve => require.ensure([], () => resolve(require('@/views/users/users')), 'users')
    }
]

4.配置总路由配置文件

在router目录下创建router.js

import Vue from 'vue'
import Router from 'vue-router'
import users from './modules/users'
import admin from './modules/admin'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Welcome',
            component: resolve => require.ensure([], () => resolve(require('@/views/Welcome')), 'Welcome')
        },
        ...users,  //用户模块路由
        ...admin  //后台管理模块路由
    ]
})

5.在main.js配置路由

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

Vue.config.productionTip = false

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

6.在App.vue中添加顶层路由

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>

  /*解决微信浏览器背景默认灰色问题*/
  body,html {
    background: #ffffff
  }
  /******************************/
  /*解决vue组件页面布局body默认边距问题*/
  body {
    margin: 0;
    padding: 0;
    border: 0;
  }
  #app {
    margin-top: 0px;
  }
</style>

启动项目之前，确保在package.json中添加有vue-router依赖。如下：

"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    //...
    "vue-router": "^3.4.9"
  }

启动项目即可实现以上路由效果。