38.v-redirect

最新推荐文章于 2022-07-06 10:23:52 发布

马彼得

最新推荐文章于 2022-07-06 10:23:52 发布

阅读量126

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/luzhensmart/article/details/86262151

版权

vue 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

如果定义前端路由后,是什么都不设置此时显示的是根路径:

然而我们想要实现当根路径即首页时,默认显示登录组件模块,方式1：在routes中加入根路径的path监听：

//根路径监听让其默认显示登录组件

{path: '/',component: login}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="./lib/vue.min.js"></script>
    <script src="./lib/vue-router.js"></script>

</head>

<body>

    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <!--因为是前端路由 所以得在地址前面加上#-->
           <!-- <a href="#/toLogin">登录</a>
           <a href="#/toRegister">注册</a> -->

           <!--简化了用href前面加#的繁琐写法-->
           <!---->
           <router-link to="/toLogin">登录</router-link>
           <router-link to="/toRegister">注册</router-link>
        </p>
        <!-- 路由出口 -->
        <!--vue-router提供的元素 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>


    <script>


        // 实现某个组件显示 某个组件不显示,如网站首页 点击登录 展示登录的组件
        //如果点击注册 则展示注册的组件

        // 1. 定义 (路由) 组件。
        var login = { 
                template: '<h1>登录组件</h1>' 
            }

        //注意:这种只能在html页面 用标签的形式引用 login只是组件名称 而不是组件对象
        //路由里面 是需要组件对象的 而不是组件名称 所以得用上面的那种写法
        // Vue.component('login',{
        //     template: '<h1>登录</h1>' 
        //  });

        var register = { 
                template: '<h1>注册组件</h1>' 
            }

            

       //创建一个路由对象 当当如vue-router.js之后,在window全局对象中,就会有一个
       //路由的构造函数 叫做VueRouter
       //在new VueRouter对象的时候 为构造函数传递一个配置对象
        var routerObj = new VueRouter({
            // route // 表示一个路由匹配规则
            routes: [//表示很多的规则
                //定义路由
                //属性1:path 表示监听哪个路由的地址 toLogin
                //属性2:表示组件,如果路由匹配到toLogin 那么则展示该组件login 注意 不能带'' 只能是上面定义的组件对象
                //,如果路由匹配到toLogin 那么则展示该组件register
                {path: '/toLogin',component: login},
                {path: '/toRegister',component: register},
                //根路径监听 让其默认显示登录组件
                {path: '/',component: login}
            ]
        })

    
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '欢迎学习vue'
            },
            router: routerObj//把路由对象 注册到VUE实例对象上 用来监听URL地址变化 然后展示对应的组件
        })

    // 现在，应用已经启动了！

    </script>

</body>

</html>

效果如下：

但此时会让用户迷惑,为什么显示的是根路径file:///F:/vuetest/38.v-redirect.html#/, 显示的却是登录组件？

理论上应该是file:///F:/vuetest/38.v-redirect.html#/toLogin 才显示登录组件,所以这种方式不太好

方式2：

//用redirect方式重定向

{path: '/',redirect: '/toLogin'}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="./lib/vue.min.js"></script>
    <script src="./lib/vue-router.js"></script>

</head>

<body>

    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <!--因为是前端路由 所以得在地址前面加上#-->
           <!-- <a href="#/toLogin">登录</a>
           <a href="#/toRegister">注册</a> -->

           <!--简化了用href前面加#的繁琐写法-->
           <!---->
           <router-link to="/toLogin">登录</router-link>
           <router-link to="/toRegister">注册</router-link>
        </p>
        <!-- 路由出口 -->
        <!--vue-router提供的元素 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>


    <script>


        // 实现某个组件显示 某个组件不显示,如网站首页 点击登录 展示登录的组件
        //如果点击注册 则展示注册的组件

        // 1. 定义 (路由) 组件。
        var login = { 
                template: '<h1>登录组件</h1>' 
            }

        //注意:这种只能在html页面 用标签的形式引用 login只是组件名称 而不是组件对象
        //路由里面 是需要组件对象的 而不是组件名称 所以得用上面的那种写法
        // Vue.component('login',{
        //     template: '<h1>登录</h1>' 
        //  });

        var register = { 
                template: '<h1>注册组件</h1>' 
            }

            

       //创建一个路由对象 当当如vue-router.js之后,在window全局对象中,就会有一个
       //路由的构造函数 叫做VueRouter
       //在new VueRouter对象的时候 为构造函数传递一个配置对象
        var routerObj = new VueRouter({
            // route // 表示一个路由匹配规则
            routes: [//表示很多的规则
                //定义路由
                //属性1:path 表示监听哪个路由的地址 toLogin
                //属性2:表示组件,如果路由匹配到toLogin 那么则展示该组件login 注意 不能带'' 只能是上面定义的组件对象
                //,如果路由匹配到toLogin 那么则展示该组件register
                {path: '/toLogin',component: login},
                {path: '/toRegister',component: register},
                //根路径监听 让其默认显示登录组件
                // {path: '/',component: login}

                //用redirect方式 重定向
                {path: '/',redirect: '/toLogin'}
            ]
        })

    
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '欢迎学习vue'
            },
            router: routerObj//把路由对象 注册到VUE实例对象上 用来监听URL地址变化 然后展示对应的组件
        })

    // 现在，应用已经启动了！

    </script>

</body>

</html>

效果如下：