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

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

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,
        }
      ]
    }
  ]
})

最后

以上就是热情康乃馨为你收集整理的Vue使用routerlink实现点击导航栏进行页面跳转的全部内容，希望文章能够帮你解决Vue使用routerlink实现点击导航栏进行页面跳转所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。