Vue入门（二十五）

目录

todolist之基本结构——介绍路由传参

开始编写代码

引入ref

传递参数（一）

query传参（path）

效果

接收路由参数

引入useRoute

useRoute

接收参数

效果

传递参数（二）

query传参（name）

效果

params传参

效果（刷新前）

效果（刷新后）

视频学习地址

---

todolist之基本结构——介绍路由传参

开始编写代码

        准备好上一讲的代码，打开 StartView.vue 文件

引入ref

	import {
		defineComponent,
		ref
	} from 'vue'

传递参数（一）

query传参（path）

<script>
	// 编写 js 内容
	import {
		defineComponent,
		ref
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'

	export default defineComponent({
		name: 'Start', // 组件名称
		setup() {
			let router = useRouter()
			let name = ref('jack')
			let num = ref(10)
			let obj = ref({
				msg: 'start'
			})
			let start = () => {
				// push 如果是传的对象的形式 就可以传递参数
				router.push({
					path: '/home',
					// query传参
					query: {
						name: name.value,
						num: num.value,
						obj: JSON.stringify(obj)
					}
				})
			}
			return {
				start
			}
		},
	})
</script>

效果

接收路由参数

引入useRoute

useRoute

官网说明：返回当前路由地址。相当于在模板中使用 。必须在 中调用。$routesetup()

	import {
		useRouter,
		useRoute
	} from 'vue-router'

接收参数

	export default defineComponent({
		name: 'HomeView', // 组件名称
		// 定义子组件
		components: {
			// NavHeader: NavHeader 键和名相等时可简写为 NavHeader
			NavHeader,
			NavMain,
			NavFooter
		},
		setup() {
			// router是全局路由对象
			let router = useRouter()
			// console.log(router);
			// route是当前路由对象
			let route = useRoute()
			// query传递过来的参数都是字符型的类型
			console.log(typeof route.query.num);
			let goto = () => {
				router.push({
					path: '/about'
				})
			}
			return {
				goto
			}
		}
	})

效果

传递参数（二）

1. push 里面还可以传入name name是路由的名字

2. query传参path和name都可以

3. query传参地址栏显示参数，刷新后参数还在
4. params传参只能用name
5. params传参地址栏不显示参数，刷新后参数消失

query传参（name）

			let start = () => {
				// push 如果是传的对象的形式 就可以传递参数
				router.push({
					// path: '/home',
					name: 'home',
					// query传参
					query: {
						name: name.value,
						num: num.value,
						obj: JSON.stringify(obj)
					}
				})
			}

效果

params传参

			let start = () => {
				router.push({
					name: 'home',
					// params传参
					params: {
						name: name.value,
						num: num.value,
						obj: JSON.stringify(obj)
					}
				})
			}

console.log(route.params);

效果（刷新前）

效果（刷新后）

---

视频学习地址

课程导学，vue3.0实现todolist 教程-慕课网 (imooc.com)