码迷,mamicode.com
首页 > 其他好文 > 详细

401 vue重定向3种方式

时间:2020-03-21 16:33:23      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:lse   else   code   规则   modules   direct   node   utf-8   log   

方式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: '/',
                    redirect: to => {
                        // console.log(to) // 路由对象去判断
                        //  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>

401 vue重定向3种方式

标签:lse   else   code   规则   modules   direct   node   utf-8   log   

原文地址:https://www.cnblogs.com/jianjie/p/12539703.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!