以前的方法

以前是通过router的push进行跳转，代码如下：

<template><div class="XXXXXXXXXXXXXXXXX" id="XXXXX" style=""><div class="item"><a><b><h1>XXXXXXXXXXX/h1></b></a></div><div class="item"><i class="XXX XXX XXX XXX"></i><a @click="goXXXX" class="XXXXX" >XXXXXXXXXX</a></div>...............</div>
</template><script>export default {methods:{goXXXX(){this.$router.push('/');},............}}
</script><style></style>

这里通过调用了vue中的goXXX方法，然后方法中通过push进行路由跳转

新方法

在vue cli中有router-link中有个to，通过这个to即可进行跳转

    <router-link tag="div" class="tab-item" to="/search"><span class="tab-link">搜索</span></router-link>

这里要配合router里面的index.js

export default new Router({routes: [{path: '/',redirect: '/recommend'},{path: '/recommend',component: Recommend},{path: '/singer',component: Singer},{path: '/rank',component: Rank},{path: '/search',component: Search}]
})

这里给出源码！

tab.vue

<template><div class="tab"><router-link tag="div" class="tab-item" to="/recommend"><span class="tab-link">推荐</span></router-link><router-link tag="div" class="tab-item" to="/singer"><span class="tab-link">歌手</span></router-link><router-link tag="div" class="tab-item" to="/rank"><span class="tab-link">排行</span></router-link><router-link tag="div" class="tab-item" to="/search"><span class="tab-link">搜索</span></router-link></div>
</template><script type="text/ecmascript-6">export default {}
</script><style scoped lang="stylus" rel="stylesheet/stylus">@import "~common/stylus/variable".tabdisplay: flexheight: 44pxline-height: 44pxfont-size: $font-size-medium.tab-itemflex: 1text-align: center.tab-linkpadding-bottom: 5pxcolor: $color-text-l&.router-link-active.tab-linkcolor: $color-themeborder-bottom: 2px solid $color-theme
</style>

router中的index.js

import Vue from 'vue'
import Router from 'vue-router'import Recommend from 'components/recommend/recommend'
import Singer from 'components/singer/singer'
import Rank from 'components/rank/rank'
import Search from 'components/search/search'Vue.use(Router)export default new Router({routes: [{path: '/',redirect: '/recommend'},{path: '/recommend',component: Recommend},{path: '/singer',component: Singer},{path: '/rank',component: Rank},{path: '/search',component: Search}]
})

运行截图如下：

点击后：

前端笔记-vue cli中使用router-link进行路由跳转相关推荐

前端笔记-vue cli中axios批量发送get和post请求及注意事项
目录基本概念关键代码基本概念这里安装好axios后,还要安装qs npm install --save qs 在vue cli中在created里面调用方法,他会在页面加载完成后自动调用! 批 ...
前端笔记-Vue cli中使用axios后JavaScript变量传输给vue变量要注意的地方
目录 axios.all中的注意事项为什么要采用全局的JavaScript变量给vue变量 axios.all中的注意事项如下的请求: methods:{getData(){axios.all([ ...
前端笔记-vue cli中使用echarts画江苏省地图
目录基本概念代码与实例基本概念这里使用echarts,框架用vue cli,下面这个链接是vue cli导入echarts https://blog.csdn.net/qq78442761/a ...
Web前端笔记-vue cli中使用echarts加载geo地图
效果是这样的: 此处是使用echarts加载geo地图. 这里简单说下逻辑: 首先npm下个包: npm install echarts 然后用个vue组件封装下. 如下代码: <templat ...
前端笔记-vue cli中v-bind动态数据实时更新
目录基本概念代码基本概念如下的例子,刚开始运行: 点击按钮: 数据库修改下数据: 再点击按钮刷新下: 下面给出请求的json数据: 刷新有2个方式第一种是强制刷新,这样是有问题的,数据和图表 ...
前端笔记-vue cli为web添加底纹
目录基本概念代码与实例基本概念这里主要是使用了css预处理首先下载包 npm install stylus stylus-loader 随后创建文件,然后写代码这里还要导入代码: 这里还要 ...
前端笔记-vue cli使用echarts
目录过程代码与实例过程首先下载echarts cnpm install echarts -S //或者是 cnpm install echarts --save 下载好后: 在main.js中 ...
前端笔记-vue cli引入sementic-ui（sementic-ui-vue）
运行截图如下: 原文链接如下: https://semantic-ui-vue.github.io/#/ 下面给出截图,部分网络不能访问
Vue.js中，如何自己维护路由跳转记录？
在Vue的项目中,如果我们想要做返回.回退操作时,一般会调用router.go(n)这个api,但是实际操作中,使用这个api有风险,就是会让用户跳出当前应用,因为它记录的是浏览器的访问记录,而不是你 ...

前端笔记-vue cli中使用router-link进行路由跳转

以前的方法

新方法

前端笔记-vue cli中使用router-link进行路由跳转相关推荐

最新文章

热门文章