RouYI-Vue-Plus4.X中的简单路由设置

 

1、前置准备：

通常的vue-router安装
安装vue-router包 npm i vue-router

创建路由模块
在src文件夹中创建router文件夹，并在内部创建index.js，路由配置必须在index.js中配置。

在index.js中导入并挂载路由模块
//导入vue和vueRouter模块
import Vue from 'vue'
import Router from 'vue-router'
//调用vue.use()方法，把Router安装为vue插件
Vue.use(Router)

在main.js中引入index
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

2、路由配置

由于RouYI-Vue-Plus已经集成了router功能，因此常规的前置准备可以省略掉。
直接进行下一步：

在router文件夹的index.js中进行配置
第一步：找到公共路由，
第一步：在 export const constantRoutes = [] 的数组中加入路由配置

例如
export const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect')
      }
    ]
  },
  {
    path:'/test/book',
    component: () => import('@/views/test/book.vue'),
    name:'Book'
  },]

重要说明：

path:'/test/book',是路由路径，即其他页面链接的时候链接的路径必须是'/test/book'。

component: () => import('@/views/test/book.vue'),这段代码即是book.vue的实际路径。component: () => import意思是动态导入（也称为代码分割）的语法，它允许Vue Router在路由被访问时按需加载对应的组件。

3、路由应用

在其他页面中引用路由

例如：
<div class="router">
      <router-link to="/test/book">图书室</router-link>
</div> 
这里的to="/test/book"必须和index.js中定义路由的path:'/test/book',完全一致。

至此，路由配置成功，点击页面上的图书室就可以导航了。