Vue入门十路由的传参和取参

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue入门十路由的传参和取参相关的知识，希望对你有一定的参考价值。

1、查询参login?id=12345

配置：（传参）:to="name:‘login‘, query:id:‘loginid‘"
获取：（取参）this.$route.query.id

2、路由参数

配置：（传参）:to="name:‘login‘, params:id:‘loginid‘"
获取：（取参）this.$route.params.id

3、路径参数register/registerid/info

配置：（传参）:to="name:‘register‘, params:id:‘registerid‘"
配置路由规则：
routes: [path: ‘/register/:id/info‘, name: ‘register‘, component: Register]
获取：（取参）this.$route.params.id

4、使用props直接取参

配置：（传参）:to="name:‘propsParams‘, params:id:‘propsParamsId‘"
配置路由规则：
routes: [
// 通过props传值
path: ‘/propsParams‘, name: ‘propsParams‘, props: true, component: PropsParams]
获取：（取参）

 var PropsParams = 
        template: `
                <div>传参直接取值
                <br>
                    直接拿到ID:id
                </div>
            `,
        // 直接通过props取参
        props: [‘id‘]

5、通过JS进行传参

this.$router.push(path: ‘/login‘, name: ‘login‘, query: id: ‘loginidjs‘)

代码示例：

query传参：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
    var Login = 
        template: `
                <div>登陆了
                    <br>
                    登陆ID:msg
                </div>
            `,
        data() 
            return 
                msg: ‘‘
            
        ,
        created() 
            this.msg = this.$route.query.id
        
    

    // 安装插件
    Vue.use(VueRouter);
    // 创建路由对象
    var router = new VueRouter(
        // 配置路由对象
        routes: [path: ‘/login‘, name: ‘login‘, component: Login
        ]
    )
    new Vue(
            el: ‘#app‘,
            router,
            template: `
            <div>
                <router-link :to="name:‘login‘, query:id:‘loginid‘">query传参</router-link>
                <router-view></router-view>
</div>
        `
        
    )
</script>
</body>
</html>

params传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
    var Register = 
        template: `
                <div>注册了
                 <br>
                    注册ID:msg
                </div>
            `,
        data() 
            return 
                msg: ‘‘
            
        ,
        created() 
            this.msg = this.$route.params.id
        
    
    var PathParams = 
        template: `
                <div>路径传参
                 <br>
                    路径ID:pat
                </div>
            `,
        data() 
            return 
                pat: ‘‘
            
        ,
        created() 
            this.pat = this.$route.params.id
        
    
    // 安装插件
    Vue.use(VueRouter);
    // 创建路由对象
    var router = new VueRouter(
        // 配置路由对象
        routes: [
            path: ‘/register‘, name: ‘register‘, component: Register
        ]
    )
    new Vue(
            el: ‘#app‘,
            router,
            template: `
            <div>
                <router-link :to="name:‘register‘, params:id:‘registerid‘">params传参</router-link>
                <router-view></router-view>
</div>
        `
        
    )
</script>

</body>
</html>

params路径传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
    var Register = 
        template: `
                <div>注册了
                 <br>
                    注册ID:msg
                </div>
            `,
        data() 
            return 
                msg: ‘‘
            
        ,
        created() 
            this.msg = this.$route.params.id
        
    
    var PathParams = 
        template: `
                <div>路径传参
                 <br>
                    路径ID:pat
                </div>
            `,
        data() 
            return 
                pat: ‘‘
            
        ,
        created() 
            this.pat = this.$route.params.id
        
    
    // 安装插件
    Vue.use(VueRouter);
    // 创建路由对象
    var router = new VueRouter(
        // 配置路由对象
        routes: [
            path: ‘/register/:id/info‘, name: ‘register‘, component: Register
        ]
    )
    new Vue(
            el: ‘#app‘,
            router,
            template: `
            <div>
                <router-link :to="name:‘register‘, params:id:‘registerid‘">path传参</router-link>
                <router-view></router-view>
</div>
        `
        
    )
</script>

</body>
</html>

params使用props直接取参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
    var PropsParams = 
        template: `
                <div>传参直接取值
                <br>
                    直接拿到ID:id
                </div>
            `,
        // 直接通过props取参
        props: [‘id‘]
    
    // 安装插件
    Vue.use(VueRouter);
    // 创建路由对象
    var router = new VueRouter(
        // 配置路由对象
        routes: [
            // 通过props传值
            path: ‘/propsParams‘, name: ‘propsParams‘, props: true, component: PropsParams
        ]
    )
    new Vue(
            el: ‘#app‘,
            router,
            template: `
            <div>
                <router-link :to="name:‘propsParams‘, params:id:‘propsParamsId‘">传参直接取值</router-link>
                <router-view></router-view>
</div>
        `
        
    )
</script>

</body>
</html>

js传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
    // 安装插件
    Vue.use(VueRouter);
    // 创建路由对象
    var router = new VueRouter()
    // 创建路由对象
    new Vue(
            el: ‘#app‘,
            router,
            template: `
            <div>
                <button @click="goLogin">JS跳转登录页面</button>
</div>
        `,
            methods: 
                goLogin() 
                    // 使用js路由跳转貌似只能使用query传参
                    this.$router.push(path: ‘/login‘, name: ‘login‘, query: id: ‘loginidjs‘)
                
            
        
    )
</script>

</body>
</html>

fullPath路由全路径监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
    var Login = 
        template: `
                <div>登陆了
                    <br>
                    登陆ID:msg
                </div>
            `,
        data() 
            return 
                msg: ‘‘
            
        ,
        created() 
            this.msg = this.$route.query.id
        
    

    // 安装插件
    Vue.use(VueRouter);
    // 创建路由对象
    var router = new VueRouter(
        // 配置路由对象
        routes: [
            path: ‘/login‘, name: ‘login‘, component: Login
        ]
    )
    new Vue(
            el: ‘#app‘,
            router,
            template: `
            <div>
                <router-link :to="name:‘login‘, query:id:‘loginid‘">query传参</router-link>
                <button @click="goLogin">js跳转</button>
                // js跳转和标签跳转同一页面,路由相同而参数不同页面ID不刷新问题
                // 使用全路径监听fullPath
                <router-view :key="$route.fullPath"></router-view>
</div>
        `,
            methods: 
                goLogin() 
                    this.$router.push(path: ‘/login‘, name: ‘login‘, query: id: ‘loginidjs‘)
                
            
        
    )
</script>

</body>
</html>

完整代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
    var Login = 
        template: `
                <div>登陆了
                    <br>
                    登陆ID:msg
                </div>
            `,
        data() 
            return 
                msg: ‘‘
            
        ,
        created() 
            this.msg = this.$route.query.id
        
    
    var Register = 
        template: `
                <div>注册了
                 <br>
                    注册ID:msg
                </div>
            `,
        data() 
            return 
                msg: ‘‘
            
        ,
        created() 
            this.msg = this.$route.params.id
        
    
    var PathParams = 
        template: `
                <div>路径传参
                 <br>
                    路径ID:pat
                </div>
            `,
        data() 
            return 
                pat: ‘‘
            
        ,
        created() 
            this.pat = this.$route.params.id
        
    
    var PropsParams = 
        template: `
                <div>传参直接取值
                <br>
                    直接拿到ID:id
                </div>
            `,
        props: [‘id‘]
    
    // 安装插件
    Vue.use(VueRouter);
    // 创建路由对象
    var router = new VueRouter(
        // 配置路由对象
        routes: [path: ‘/login‘, name: ‘login‘, component: Login,
            path: ‘/register‘, name: ‘register‘, component: Register,
            // 路径传参
            path: ‘/pathParams/:id/info‘, name: ‘pathParams‘, component: PathParams,
            // 直接取
            path: ‘/propsParams‘, name: ‘propsParams‘, props: true, component: PropsParams
        ]
    )
    new Vue(
            el: ‘#app‘,
            router,
            template: `
            <div>
                <router-link :to="name:‘login‘, query:id:‘loginid‘">query传参</router-link>
                <router-link :to="name:‘register‘, params:id:‘registerid‘">params传参</router-link>
                <router-link :to="name:‘pathParams‘, params:id:‘123456‘">path传参</router-link>
                <router-link :to="name:‘propsParams‘, params:id:‘propsParamsId‘">传参直接取值</router-link>
                <button @click="goLogin">JS跳转登录页面</button>
                <router-view :key="$route.fullPath"></router-view>
</div>
        `,
            methods: 
                goLogin() 
                    this.$router.push(path: ‘/login‘, name: ‘login‘, query: id: ‘loginidjs‘)
                
            
        
    )
</script>

</body>
</html>

以上是关于Vue入门十路由的传参和取参的主要内容，如果未能解决你的问题，请参考以下文章

Vue通过JS跳转路由

VUE--query 方式传参和接收参数

vue中路由(router)的path与name传参和接收方式

路由传参和路由守卫

vue路由传参并跳转页面

构造方法和方法重载 this关键字 方法的传参和递归调用