欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue中的路由重定向

程序员文章站 2022-03-25 08:51:13
...

当我们注册组件时,一定会有一个默认的打开页面,这时就要用到我们的路由重定向rediect

<!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.js"></script>
    <script src="lib/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="login">登录</router-link>
        <router-link to="reg">注册</router-link>
        <router-view></router-view>
    </div>
    <script>
        var login={template:'<h1>这个是登录组件<h1>'};
        var reg={template:'<h1>这个是注册组件<h1>'};
        const router=new VueRouter({
            routes:[
                    {path:'/login',component:login},//这里component属性的值要的是路由到模板对象的名字,而不是组件的名字
                    {path:'/reg',component:reg},
                    // {path:'/',component:login}
                    //路由重定向
                    {path:'/',redirect:'/login'}//一打开页面默认为login页面
            ]
        })
        var vm=new Vue({
            el:'#app',
            data:{},
            methods:{ },
            router
        })
    </script>
</body>
</html>