路由跳转的总结

路由跳转

方式1返回上一级或指定的路由

//使用方式1：
this.$router.push('填写我们指定要跳转的路由')
//使用方式2
this.$router.go('-1')  //-1表示我们要回到上一级路由

方式2使用路由跳转

//路由router。index.js中的配置
import Vue from 'vue'
import Router from 'vue-router'

import HellowA from '../components/HollowA'
import HellowB from '../components/HollowB'
import HellowC from '../components/HellowC'
Vue.use(Router)
export default new Router({
    routes: [{
            path: '/HellowA',
            name: 'HellowA',
            component: HellowA
        },
        {
            path: '/HellowC',
            name: 'HellowC',
            component: HellowC
        },
        {
            path: '/HellowB',
            name: 'HellowB',
            component: HellowB
        }
    ]
})

//在main.js中的配置
import Vue from 'vue'
import App from './App.vue'
import router from './assets/index'

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
    router
}).$mount('#app')


//在组件中使用
<template>
  <div id="app">
<router-view></router-view>

<div class="Bottom">
  <router-link to="/HellowA">HellowA</router-link>
  <router-link to="/HellowB">HellowB</router-link>
  <router-link to="/HellowC">HellowC</router-link>
</div>
  </div>
</template>

<script>
export default {
  name: 'app',  
}
</script>
<style>
#app {

}
.Bottom{
  display: flex;
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0; 

}
a{
  text-decoration: none;
  flex: 1;
  border: 1px solid #000;
  line-height: 50px;
  text-align: center;
}
</style>