Vue-router路由传参_vue-router 路由传参-优快云博客

本文链接：https://blog.youkuaiyun.com/lx00000025/article/details/132320693

一、query参数传递

实例：

<template>
  <div>
    <ul>
        <li v-for="m in messageList" :key="m.id">
            <!--跳转路由并携带query参数，to的字符串写法-->
            <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`" >{{m.title}}</router-link>&nbsp;&nbsp; -->
            <!--跳转路由并携带query参数，to的对象写法-->
            <router-link :to="{
                path:'/home/message/detail',
                query:{
                    id:m.id,
                    title:m.title
                }
            }" >
                {{m.title}}
            </router-link>
        </li>
    </ul>
    <router-view></router-view>
    </div>
</template>

<script>
export default {
    name:'Message',
    data() {
        return {
            messageList:[
                {id:'001',title:'消息001'},
                {id:'002',title:'消息002'},
                {id:'003',title:'消息003'},
            ]
        }
    },
}
</script>

二、命名路由

可以通过配置name属性将一个组件用一个别名代替，用的时候写别名就可以了

2.1 router配置

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'
//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About
        },
        //一级路由
        {
            path:'/home',
            component:Home,
            //二级路由（子路由）
            children:[
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,
                        }

                    ]
                }
            ]
        }

    ]
})

2.2 使用

<template>
  <div>
    <ul>
        <li v-for="m in messageList" :key="m.id">
            <!--跳转路由并携带query参数，to的字符串写法-->
            <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`" >{{m.title}}</router-link>&nbsp;&nbsp; -->
            <!--跳转路由并携带query参数，to的对象写法-->
            <router-link :to="{
                name:'xiangqing',
                query:{
                    id:m.id,
                    title:m.title
                }
            }" >
                {{m.title}}
            </router-link>
        </li>
    </ul>
    <router-view></router-view>
    </div>
</template>

<script>
export default {
    name:'Message',
    data() {
        return {
            messageList:[
                {id:'001',title:'消息001'},
                {id:'002',title:'消息002'},
                {id:'003',title:'消息003'},
            ]
        }
    },
}
</script>

三、params参数传递

3.1 路由配置

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'
//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About
        },
        //一级路由
        {
            path:'/home',
            component:Home,
            //二级路由（子路由）
            children:[
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail/:id/:title',
                            component:Detail,
                        }

                    ]
                }
            ]
        }

    ]
})

3.2 使用

<template>
  <div>
    <ul>
        <li v-for="m in messageList" :key="m.id">
            <!--跳转路由并携带params参数，to的字符串写法-->
            <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`" >{{m.title}}</router-link>&nbsp;&nbsp; -->
            <!--跳转路由并携带params参数，to的对象写法-->
            <router-link :to="{
                name:'xiangqing',
                params:{
                    id:m.id,
                    title:m.title
                }
            }" >
                {{m.title}}
            </router-link>
        </li>
    </ul>
    <router-view></router-view>
    </div>
</template>

<script>
export default {
    name:'Message',
    data() {
        return {
            messageList:[
                {id:'001',title:'消息001'},
                {id:'002',title:'消息002'},
                {id:'003',title:'消息003'},
            ]
        }
    },
}
</script>

四、路由props属性

作用：让路由组件更方便的收到参数

4.1 路由配置

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			name:'guanyu',
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home,
			children:[
				{
					path:'news',
					component:News,
				},
				{
					path:'message',
					component:Message,
					children:[
						{
							name:'xiangqing',
							path:'detail',
							component:Detail,

							//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
							// props:{a:1,b:'hello'}

							//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
							// props:true

							//props的第三种写法，值为函数
							props($route){
								return {
									id:$route.query.id,
									title:$route.query.title,
									a:1,
									b:'hello'
								}
							}

						}
					]
				}
			]
		}
	]
})

4.2 使用

<template>
	<ul>
		<li>消息编号：{{id}}</li>
		<li>消息标题：{{title}}</li>
	</ul>
</template>

<script>
	export default {
		name:'Detail',
		props:['id','title'],
		computed: {
			// id(){
			// 	return this.$route.query.id
			// },
			// title(){
			// 	return this.$route.query.title
			// },
		},
		mounted() {
			// console.log(this.$route)
		},
	}
</script>

五、路由的replace

设置 replace 属性的话，当点击时，会调用 router.replace()，而不是 router.push()，所以导航后不会留下历史记录。

<template>
	<div>
		<h2>Home组件内容</h2>
		<div>
			<ul class="nav nav-tabs">
				<li>
					<router-link replace class="list-group-item" active-class="active" to="/home/news">News</router-link>
				</li>
				<li>
					<router-link replace class="list-group-item" active-class="active" to="/home/message">Message</router-link>
				</li>
			</ul>
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Home',
		/* beforeDestroy() {
			console.log('Home组件即将被销毁了')
		}, */
		/* mounted() {
			console.log('Home组件挂载完毕了',this)
			window.homeRoute = this.$route
			window.homeRouter = this.$router
		},  */
	}
</script>