Vue使用routerlink实现点击导航栏进行页面跳转

实现内容

如图所示，要实现的是：点击导航栏中的Data Set, Data Mining, Result List, Model List区域跳转至对应界面。

使用router-link来实现跳转

1.如代码所示，router-link后面的to需要的内容是要跳转界面的路径。这个路径在src–>router–>index.js中进行编辑。同时需要保证这些跳转界面的vue文件已存在。并且，为了保证页面跳转之后依然可以持续传输数据，而不断开链接，需要使用来优化。

<template>  
  <div>
   <div class="mainMenu">
     数据挖掘可视化平台
   </div>
   <div class="menuList">
    <div class="item"><router-link to="/DataSet">Data Set</router-link></div>
    <div class="item"><router-link to="/Mining">Data Mining</router-link></div>
    <div class="item"><router-link to="/ModelList">Model List</router-link></div>
    <div class="item"><router-link to="/ResultList">Result List</router-link></div>
   </div>
   <div class="app-content">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

1. 如index.js的代码所示，首先，需要将要跳转的界面的vue文件import进来。期中DataMining为导航栏所在的vue文件。其他界面都包含在DataMining路径中的children中。redirect为进入导航页所展示的第一界面。其他界面则需要定义其path的name和component。

import Vue from 'vue'
import Router from 'vue-router'
import DataMining from '@/components/DataMining'
import DataSet from '@/components/DataSet'
import Mining from '@/components/Mining'
import ResultList from '@/components/ResultList'
import ModelList from '@/components/ModelList'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'DataMining',
      component: DataMining,
      children:[
        {
         path:'/',
         redirect: 'DataSet',
        },
        {
         path: 'DataSet',
         name: 'DataSet',
         component: DataSet,
        },
        {
         path: 'Mining',
         name: 'Mining',
         component: Mining,
        },
        {
         path: 'ResultList',
         name: 'ResultList',
         component: ResultList,
        },
        {
         path: 'ModelList',
         name: 'ModelList',
         component: ModelList,
        }
      ]
    }
  ]
})

经过上述步骤，即可完成界面的跳转。

tips：要实现导航栏的水平均匀分布，则需要对其内容的style进行设置，也就是class：item，在其中添加“float: left”。