美文网首页
vue-router路由重定向

vue-router路由重定向

作者: 小黄不头秃 | 来源:发表于2023-06-09 07:12 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <h1 >test</h1>
            <div>
                <router-link to="/user">user</router-linnk>
                <router-link to="/register">register</router-linnk>
            </div>
            <div>
                <router-view></router-view>
            </div>
        </div>
    <!--    
        路由重定向
    用户在访问A地址的时候强制用户跳转到C,从而展示特定的组件内容 
    通过路由规则的redirect属性,指定一个新地址,就可以很方便的重定向
    -->
    <script src="./vue/vue.js"></script>
    <script src="./vue/vue-router.js"></script>
    <script >
        const router = new VueRouter({
            routes:[
                {
                    path:"/",
                    redirect:"/user"
                },
                {
                    path:"/user",
                    component:{
                        template:"<h1>HELLO USER</h1>"
                    }
                },
                {
                    path:"/register",
                    component:{
                        template:"<h1>HELLO REGISTER</h1>"
                    }
                },
                ]   
        });
    
        const vm = new Vue({
            el:"#app",
            router:router
        });
        </script>
    </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:vue-router路由重定向

          本文链接:https://www.haomeiwen.com/subject/oxrpedtx.html