前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >cssjshtml vue.js router几种跳转方式

cssjshtml vue.js router几种跳转方式

作者头像
葫芦
发布2019-04-17 15:29:51
1.1K0
发布2019-04-17 15:29:51
举报
文章被收录于专栏:葫芦葫芦

Home.vue

跳转主要有以下几种方式:

  goToBefore(){       //跳转到上一次浏览的页面       this.$router.go(-1);     },     //指定跳转的地址     goToMenu(){       this.$router.replace("/menu");     },     //指定跳转路由的名字下     goToRouterName(){       this.$router.replace({name:'menulink'});     },     //通过push进行跳转     pushMenu(){       //1. this.$router.push('/menu');      //2. this.$router.push({name:'menulink'});     }

代码语言:javascript
复制
<template>
  <div>
    <h1>Home</h1>
    <button @click="goToBefore" class="btn btn-success">跳转到上一次页面</button>
    <button @click="goToMenu" class="btn btn-success">跳转到指定menu</button>
    <button @click="goToRouterName" class="btn btn-success">跳转到指定路由的名字下</button>
    <button @click="pushMenu" class="btn btn-success">push跳转</button>

  </div>
</template>

<script>
  export default {
  methods:{
    goToBefore(){
      //跳转到上一次浏览的页面
      this.$router.go(-1);
    },
    //指定跳转的地址
    goToMenu(){
      this.$router.replace("/menu");
    },
    //指定跳转路由的名字下
    goToRouterName(){
      this.$router.replace({name:'menulink'});
    },
    //通过push进行跳转
    pushMenu(){
      // this.$router.push('/menu');
      this.$router.push({name:'menulink'});
    }

  }
  }
</script>

<style scoped>


</style>

main.js

代码语言:javascript
复制
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home'
import Menu from './components/Menu'
import Admin from './components/Admin'
import About from './components/about/About'
import Login from './components/Login'
import Register from './components/Register'


Vue.use(VueRouter)

const routes=[
  {path:'/',component:Home},
  {path:'/menu',name:"menulink",component:Menu},
  {path:'/admin',component:Admin},
  {path:'/about',component:About},
  {path:'/login',component:Login},
  {path:'/register',component:Register},
  {path:"*",redirect:'/'}
]
const router=new VueRouter({
  routes,
  mode:'history'

})


new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019/01/09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Home.vue
  • main.js
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档