Vue中路由的传参

本是古典何须时尚 2022-04-18 03:04 260阅读 0赞

### 文章目录 ###

*  示例
 *   *  源码
     *  结果
     *  分析

在项目开发中，需要用到路由传参的地方往往很多，比如说根据新闻列表页面查询新闻详情，此时我们就需要将该条新闻的`id`信息传递给新闻详情页面。

而在`vue-router`中，传参所用的关键字为`query`，其后跟参数`map`对象。

# 示例 #

## 源码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue-router</title>
    </head>
    <body>
    <template id="root">
        <div>
            
            <router-view></router-view>
        </div>
    </template>
    <template id="register">
        <div>
            <h2>注册页面</h2>
            <input type="text" v-model="uname">
            <button @click="registerMethod">注册</button>
        </div>
    </template>
    <template id="login">
        <div>
            <h2>登录页面</h2>
            <input type="text" placeholder="请输入登录账号" v-model="loginName">
            <button @click="loginMethod">登录</button>
        </div>
    </template>
    <template id="welcome">
        <div>
            <h2>欢迎界面</h2>
            <h3 v-show="currentUser != ''">{
       {currentUser}}</h3>
        </div>
    </template>
    <div id="app">
        <router-link to="/root/register">注册</router-link> |
        <router-link to="/root/login">登录</router-link>
        
        <router-view></router-view>
    </div>
    </body>
    <script src="../../../js/vue/vue/2.0/vue.js"></script>
    <script src="../../../js/vue/vue-router/2.3.1/vue-router.js"></script>
    <script type="application/javascript">
        //定义路由根组件
        var App = Vue.extend({});
        //根页面
        var root = Vue.extend({
            template:'#root'
        });
        //欢迎页面
        var welcome = Vue.extend({
            template:'#welcome'
            ,data(){
                return {
                    uname:''
                    ,currentUser:''
                }
            }
            ,created(){
                //接收传过来的参数，将其存放到本地数据域uname中
                this.uname = this.$route.query.uname;
                //排除非空可能
                if(this.uname != '' && this.uname != 'undefined' && this.uname != undefined){
                    this.currentUser = '欢迎您:' + this.uname + "！"
                }
            }
        });
        //定义register页面
        var register = Vue.extend({
            template:'#register'
            ,data(){
                return {
                    uname:''
                }
            }
            ,methods:{
                registerMethod(){
                    alert('注册成功！用户名为：' + this.uname);
                    //跳转到登录页面
                    this.$router.push({path:'/root/login',query:{uname:this.uname}});
                }
            }
        });
        //定义login页面
        var login = Vue.extend({
            template:'#login'
            ,data(){
                return {
                    uname:''
                    ,loginName:''
                }
            }
            ,created(){
                //接收传过来的参数，将其存放到本地数据域uname中
                this.uname = this.$route.query.uname;
            }
            ,methods:{
                loginMethod(){
                    //如果没有输入任何信息，则提示输入账号。
                    if(this.loginName.trim() == ''){
                        alert('请输入登录账号！');
                        return;
                    }
                    //如果填写的登录名与注册的账号相一致，则登录成功！
                    if(this.uname == this.loginName){
                        alert('登录成功！');
                        //登录成功后跳转到欢迎界面
                        this.$router.push({path:'/root/welcome',query:{uname:this.loginName}});
                    } else {
                        alert('登录失败！');
                    }
                }
            }
        });
        //设定路由规则
        var router = new VueRouter({
            routes:[
                {
                    path:'/'
                    ,redirect:'/root/welcome'
                }
                ,{
                    path:'/root'
                    ,component:root
                    ,children:[
                        {
                            path:'register'
                            ,component:register
                        }
                        ,{
                            path:'login'
                            ,component:login
                        }
                        ,{
                            path:'welcome'
                            ,component:welcome
                        }
                    ]
                }
            ]
        });
        //开启路由
        new Vue({
            el:'#app'
            ,router:router
        });
    </script>
    </html>

## 结果 ##

![在这里插入图片描述][20181107173821141.gif]

## 分析 ##

上面的代码实现的功能是，当我们访问首页路径`/`时，其自动跳转到欢迎界面`/root/welcome`。

当我们点击注册链接时，其会跳转到注册界面，我们在注册界面注册好用户账号后其会自动跳转到登录界面，在跳转的过程中，它会将我们在此之前注册的账号传递给登录界面，在登录界面中，如果我们填写上正确的账号后，其会直接跳转到欢迎界面，如果填写错误，其会弹出错误信息。

当我们再次跳转回欢迎界面后，其会将登录页面中的用户账号直接给带过来，并且在欢迎界面中展示出`欢迎您:张三！`

这里需要注意的是，参数的传递用的是`query`，比如说传递用户账号，其传参用的就是`query:{uname:this.uname}`。

而在被跳转到的页面，我们使用`this.$route.query.uname`来接收跳转之前页面传递过来的参数。

而页面的跳转用到的是`$router.push`，比如说上面的代码`this.$router.push({path:'/root/welcome',query:{uname:this.loginName}});`就是跳转到欢迎界面，同时将登录界面中的用户登录名传递过去。

[20181107173821141.gif]: /images/20220418/ea9faf26f4ed4a72abafb38927b288c8.png