路由全局跳转和局部跳转

目的

是为了实现点击登录注册页面可以跳到首页，或者是说点击想要跳转一个完全新的页面或者点击导航栏，局部路由跳转，也是之前做项目会遇到的问题，由此拿来记录一下，本文章是测试案例，后期想实现点击登录注册页面可以跳到首页，可以做个路由守卫去进行判断

目前页面分配

Home是主页面，在Home页面下局部跳转到About和School页面，在Home页面下全局跳转到Renewpage页面，分别采用编程式跳转和普通router-link跳转

main.js

//  引入vueRouter
import VueRouter from "vue-router"; 
​
// 引入Vue
import Vue from "vue";
​
// 引入App
import App from './App.vue'
​
// 引入store
import store from '../store/demoindex'
// 引入router
import router from './router'
​
​
​
// 关闭Vue的生产提示
Vue.config.productionTip = false
Vue.use(VueRouter)
​
​
// 创建vm
new Vue({
    el:'#app',
    render : h=>h(App),
    store,
    router,
    beforeCreate() {
        Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
    },
})

App.vue

也就在这个页面放了 router-view

<template>
    <div class="App">
        <router-view></router-view>
    </div>
  </template>
<script>
//下边的js就没有写东西了，

router.js

//引入VueRouter
import VueRouter from 'vue-router'
​
import Home from '@/components/Home.vue'
import Renewpage from '@/components/Renewpage.vue'
import School from '@/components/School.vue'
import About from '@/components/About.vue'
​
​
​
const router = new VueRouter({
    mode:'history',
    // base:'/testvue/',
    routes:[
        // 默认最初路径是Home组件
        {
            path:'/',
            component:Home,
        },
        {
            path:'/home',
            component:Home,//如果这里用别的组件，那么路由跳转就会跳到一个新的页面，因为我们默认的路径是Home组件，在Home组件里多放了个 router-view，则School和About组件页面的渲染就会在Home组件渲染了
            children:[ 
            {  
                path:'school', //二级路由此处一定不要写：/news
                name:'school',
                component:School
            },
            { 
                path:'about',
                name:'about',
                component:About
            },
        ]},
        //全局跳转的路由
        {
            path:'/renewpage',
            name:'renewpage',
            component:Renewpage,
        },
        
    ]
})
​
//暴露router
export default router

Home.vue

为了确保School和About能够局部跳转，在此页面也是放了个router-view

Renewpage则是全局跳转

<template>
    <div class="Home">
      <h1>这个页面是Home页面</h1>
      <!-- <br/> -->
      <h2>this.$router.push路由跳转</h2>
      <button @click="toSchool">School</button>
      <button @click="toAbout">About</button>
      <button @click="toNewPage">跳到新页面</button>
      <br/><br/><br/>
      <h2>router-link路由跳转</h2>
      <router-link active-class="active" to='/home/school'><button>School</button></router-link>
      <router-link active-class="active" to='/home/about'><button>About</button></router-link>
      <router-link class="list-group-item" active-class="active" to="/renewpage"><button>跳到新页面</button></router-link>
      <br/><br/><br/>
      <h2>此下为页面跳转之后的展示</h2>
      
      <router-view ></router-view>
​
    </div>
  </template>
  <script>
  export default {
      name:'Home',
      data() {
          return {
            
          }
      },
      computed:{
      },
      methods:{
        toSchool(){
            this.$router.push({
              name:'school',
              params:{
                title:'我是this.$router.push传过来的School字段params'
              }
            })
        },
        toAbout(){
          this.$router.push({
              name:'about',
              params:{
                title:'我是this.$router.push传过来的About字段params'
              }
            })
        },
        toNewPage(){
          this.$router.push({
              name:'renewpage',
              params:{
                title:'我是this.$router.push传过来的renewpage字段params'
              }
            })
        }
          
      },  
      created(){
​
      }
  }
  
  </script>
  
  <style lang="css">
​
  </style>

About/School/Renewpage.vue

这个页面放自己想放的东西就好

<template>
  <div class="about">
    这个页面是About页面
  </div>
</template>
<script>
​
export default {
    name:'About',
    data() {
        return {
          
        }
    },
}
​
</script>
​