基于ant引入框架后添加路由导航实现页面跳转

---

前言

基于ant框架引入路由导航以及页面跳转功能

---

一、安装vue-router

vue2项目安装版本3
vue3项目安装版本4

npm install vue-router@3

二、创建index.js写路由索引

1.书写index.js

src目录下新建文件夹router，router下新建文件index.js。index.js中service下有rms页面，有gre页面，有ipsec页面…所以rms和gre等为service的children组件。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const routes = [
  { path: '/', component: () => import('../services/service.vue') ,children: [
    { path: '/services/rms', component: () => import('../services/rms.vue') },
    { path: '/services/gre', component: () => import('../services/gre.vue') },
    { path: '/services/ipsec', component: () => import('../services/ipsec.vue') }
  ]},
  { 
    path:'*', redirect: '/' 
  }
]
const router = new Router({
  mode: 'hash',
  routes
})

export default router

2.main.js需要引入router

3.APP.vue正文内引用router

根组件App.vue需要添加标签
<router-view

同理，由于路由path中有孩子嵌套，children，所以父组件内容也需要引入router-view

编译后运行结果，可以实现页面导航。随着浏览器路径不同跳转指定vue文件。（主要是index.js写的路由）

三 路由跳转

<router-link to="../services/rms">rms</router-link>
/*可实现点击rms内容即跳转到指定路径rms位置*/

---

总结

ant-design-vue框架后添加路由导航和页面跳转功能。