401 vue路由重定向3种方式：path、name、函数 

方式1：
redirect： '/header'

方式2：
redirect： { name： 'header' }

方式3：
redirect： to => {
  // console.log(to)
  return {
    name： 'about'
  }
}

10-重定向.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- 1. 入口 -->
    <!-- <router-link to="/one">one</router-link> -->

    <!-- 4. 出口 -->
    <router-view></router-view>
  </div>

  <script src="./vue.js"></script>
  <script src="./node_modules/vue-router/dist/vue-router.js"></script>
  <script>
    // 3. 组件
    const One = {
      template: `<div>one组件</div>`
    }

    //  实例化
    const router = new VueRouter({
      // 2. 规则
      routes: [
        // 方式1 : path路径
        {
          path: '/',
          redirect: '/one'
        },
        // 方式2 : 路由的名称
        {
          path: '/',
          redirect: {
            name: 'one'
          }
        },
        // 方式3 : 函数，用路由对象去判断
        {
          path: '/',
          // to：即路由对象$route
          redirect: to => {
            /* console.log(to) // to：即路由对象$route
             if (to.XXX) {
               return { name : 'one'}
             } else {
               return {name : 'two' }
             } */

            return {
              name: 'one'
            }
          }
        }, 
        {
          path: '/one',
          name: 'one',
          component: One
        }
      ]
    })

    const vm = new Vue({
      router,
      el: '#app',
      data: {}
    })
  </script>
</body>

</html>

posted on 2020-03-21 15:52  冲啊！  阅读(3841)  评论(0)  编辑  收藏  举报

导航