vue-router路由传参总结

路由传参

通过学习和查找资料，路由传参有两种方式，在这里总结一下

1.使用params进行传递参数

使用方法:

this.$router.push({
    name: 'NewsContent',
    params: {
        name: '测试'
    }
})

具体代码：

news_list.vue

<template>
    <div classs="" @click="urlPage">
        新闻列表
    <div> 
</template>
<script>
    export default{
        name: "news_list",
        methods: {
            urlPage(){
                this.$router.push({
                     name: 'NewsContent',
                     params: {
                         name: '测试'
                     }
                });
            }
        }
    }
</script>

接收参数

第一种方法
news_content.vue

<template>
    <div class="">
        新闻案例
        <div>{{ name }}</div>
    </div>
</template>
<script>
    export default{
        name: "news_content",
        props: {
            name: {
                type: String,
                default: ''
            }
        }
    }
</script>

index.js

import NewsList from '@/components/news_list'
import NewsContent from '@/components/news_content'

export default new Router({
    routes: [
        {
            path: '/',
            name: 'NewsList',
            component: NewsList,
        },
        {
            path: '/news_content/:name',
            //在/news_content后面添加/:name可以防止刷新news_content页面时参数消失
            name: 'NewsContent',
            component: 'NewsContent' ,
            props: (route) => {
                name: route.params.name
            }
        }
    ]

第二种方法
news_content.vue

<template>
    <div class="">
        新闻案例
        <div>{{ name }}</div>
    </div>
</template>
<script>
    export default{
        name: "news_content",
        data(){
            return {
                name: ''
            }
        },
        created(){
            this.name = this.$route.params.name;
        }
    }
</script>

index.js

import NewsList from '@/components/news_list'
import NewsContent from '@/components/news_content'

export default new Router({
    routes: [
        {
            path: '/',
            name: 'NewsList',
            component: NewsList,
        },
        {
            path: '/news_content/:name',
            //在/news_content后面添加/:name可以防止刷新news_content页面时参数消失
            name: 'NewsContent',
            component: 'NewsContent' ,
        }
    ]

注意：在传递参数时使用的是this.$router，接收参数时使用的是this.$route
this.$router为VueRouter的实例，想要导航到不同的URL，使用this.$router.push
this.$route为当前router跳转对象，里面可以获取name、path、query、params等

2.使用query进行传递参数

使用方法:

this.$router.push({
    path: '/news_content',
    query: {
        name: '测试'
    }
})

具体代码：

news_list.vue

<template>
    <div classs="" @click="urlPage">
        新闻列表
    <div> 
</template>
<script>
    export default{
        name: "news_list",
        methods: {
            urlPage(){
                this.$router.push({
                     path: '/news_content',
                     query: {
                         name: '测试'
                     }
                });
            }
        }
    }
</script>

接收参数

第一种方法
news_content.vue

<template>
    <div class="">
        新闻案例
        <div>{{ name }}</div>
    </div>
</template>
<script>
    export default{
        name: "news_content",
        props: {
            name: {
                type: String,
                default: ''
            }
        }
    }
</script>

index.js

import NewsList from '@/components/news_list'
import NewsContent from '@/components/news_content'

export default new Router({
    routes: [
        {
            path: '/',
            name: 'NewsList',
            component: NewsList,
        },
        {
            path: '/news_content',
            //使用query时，不用在/news_content后面加/:name,刷新页面时，参数依旧不变
            name: 'NewsContent',
            component: 'NewsContent' ,
            props: (route) => {
                name: route.query.name
            }
        }
    ]

第二种方法
news_content.vue

<template>
    <div class="">
        新闻案例
        <div>{{ name }}</div>
    </div>
</template>
<script>
    export default{
        name: "news_content",
        data(){
            return {
                name: ''
            }
        },
        created(){
            this.name = this.$route.query.name;
        }
    }
</script>

index.js

import NewsList from '@/components/news_list'
import NewsContent from '@/components/news_content'

export default new Router({
    routes: [
        {
            path: '/',
            name: 'NewsList',
            component: NewsList,
        },
        {
            path: '/news_content',
            name: 'NewsContent',
            component: 'NewsContent' ,
        }
    ]

注意：params传参，push里面只能是name:'xxx',而不能是path:'xxx'；
      query传参，push里面可以是name:'xxx’，也可以是path:'xxx'

补充

使用<router-link>也可以进行传参

使用方法

<router-link :to="{name: 'NewsContent',params: {name: '测试'}">传参</router-link>
<router-link :to="{path: '/news_content',query: {name: '测试'}}">传参</router-link>