vue全家桶（2.4）

2024-03-21 22:43:34

3.6.重定向和别名

3.6.1.重定向

路由重定向通俗的说就是从一个路由重新定位跳转到另一个路由，例如：访问的 “/a” 重定向到“/b”

重定向也是通过配置routes选项完成的

routes: [  
  {
    path: '/course',
    component: Course
  },
  {
      path: '/hello',
      component: Hello,
      redirect: '/course'
  }]

上面代码中，访问 ‘/hello’ 并不会去渲染Hello组件，而是会跳转到路由‘/course’，去渲染course组件

重定向的目标可以是一个命名路由

routes: [
  {
    path: '/questions',
    name: 'wenda',
    component: Questions
  },
  {
    path: '/hello',
    component: Hello,
    redirect: {name: 'wenda'}
  }]

上面代码配置后，访问 ‘/hello’就会跳转到命名路由‘wenda’，即‘/questions’，从而去渲染Questions组件

重定向的目标也可以是一个方法,在方法中可以写一些逻辑代码

{
  path: '/hello',
  component: Hello,
  redirect: (to) => {
    if (to.hash) {
      return '/questions'
    } else {
      return '/course'
    }
  }
}

这里的to是一个对象，大家可以尝试着打印出来看看这里面到底是些什么内容

3.6.2.别名

别名从字面上理解为别的名字，比如有的人有一个中文名，还有一个别的名字英文名。举例： ‘/hello’ 有一个别名 ‘/hi’，当用户访问‘/hi’的时候，url会保持不变，但是渲染的还是'/hello'对应的组件，说白了就是不管用户访问的是'/hello'，还是‘/hi’，找到的都是同一个人（Hello组件）

routes: [
  {
    path: '/hello',
    component: Hello,
    alias: '/hi'
  }]

3.7.编程式导航

3.7.1.声明式导航

前面我们学过的通过这种方式来定义导航链接的方式叫做声明式导航，特点就是要在tempalte中去写跳转链接，通过生成a标签的形势跳转

 <ul>
  <li><router-link :to="index" active-class="nav-active" event="mouseover">首页</router-link></li>
  <li><router-link :to="course" event="mouseover">课程</router-link></li>
  <li><router-link :to="vip" event="mouseover">会员</router-link></li>
  <li><router-link :to="question" event="mouseover">问答</router-link></li>
</ul>

3.7.2.编程式导航

编程式导航通俗的说就是vue-router给我们提供了一堆方法，我们通过在js中编写代码来实现导航切换，这些常用方法包括：back、forward、go、push、replace等

1.push 想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录

<template>
  <div class="page">
      <button @click="pushHandle">push方法</button>
      <router-view></router-view>
      <router-view name="a"></router-view>
      <router-view name="b"></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {

    }
  },
  components: {

  },
  methods: {
    pushHandle () {
      // this.$router.push('/hello')
      // push内部可以给对象
      this.$router.push({name: 'wenda'})
    }
  }
}
</script>

<style scoped>
.page {
  border: 1px solid #ccc;
  background-color: #ccc;
  height: 800px;

  background-color: aquamarine;
}
</style>

注意：在 Vue 实例内部，你可以通过 $router 访问路由实例

2.replace 跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录

methods: {
  pushHandle () {
    // this.$router.push('/hello')   push内部直接给字符串
    // push内部可以给对象
    this.$router.push({name: 'wenda'})
  },
  replaceHandle () {
    this.$router.replace('/questions')
  }
}

3.back back方法可以回到上一步

methods: {
  pushHandle () {
    // this.$router.push('/hello')   push内部直接给字符串
    // push内部可以给对象
    this.$router.push({name: 'wenda'})
  },
  replaceHandle () {
    this.$router.replace('/questions')
  },
  backHandle () {
    //回到上一步
    this.$router.back()
  }
}

4.forward forward方法可以前进一步

  methods: {
    pushHandle () {
      // this.$router.push('/hello')   push内部直接给字符串
      // push内部可以给对象
      this.$router.push({name: 'wenda'})
    },
    replaceHandle () {
      this.$router.replace('/questions')
    },
    backHandle () {
      //回到上一步
      this.$router.back()
    },
    forwardHandle () {
      //前进一步
      this.$router.forward()
    }
  }
}

5.go go方法可以一次跳多步

  methods: {
    pushHandle () {
      // this.$router.push('/hello')   push内部直接给字符串
      // push内部可以给对象
      this.$router.push({name: 'wenda'})
    },
    replaceHandle () {
      this.$router.replace('/questions')
    },
    backHandle () {
      this.$router.back()
    },
    forwardHandle () {
      this.$router.forward()
    },
    goHandle () {
      // 前进2步  注意：go里面如果是正数表示前进，如果是负数表示后退
      this.$router.go(2)
    }
  }
}

螺钉课堂视频课程地址：http://edu.nodeing.com

码农公寓