vue3.0路由传参

最新推荐文章于 2024-06-06 09:30:00 发布

要温柔以待

最新推荐文章于 2024-06-06 09:30:00 发布

阅读量398

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48554037/article/details/121023061

版权

本文介绍了在Vue.js中如何定义和使用路由组件，包括首页组件和列表页组件的设置。通过`router-link`进行页面跳转，并在列表页组件中展示路由参数。在`created`生命周期钩子中，展示了如何访问和解析`$route`对象，获取`query`参数。此外，还提及了在组件中进行方法定义和操作的可能性。

摘要由CSDN通过智能技术生成

定义 路由组件中
	首页组件
  let Index = {
      template: `
            <div>
            	// to 是跳转后面是 要跳转的地址  
                <router-link to="/list?type=hot">跳转到列表页</router-link>
                <h1>首页</h1>
                <p>首页里面的内容</p>
            </div>
        `,
    };
	列表页组件中需要操作
	let List = {
      template: `
            <h1>列表页 {{$route.query.type}}</h1>
        `,
        data(){
        	return {
					typeone : " ",
			}
        },
        //在created生命周期中输出
        created(){
        
			console.log(this.$route) 是一个路由信息对象

		//   fullPath    完整路径   /list?type=hot
        //   path        真实路径       /list
        //   meta        路由元信息
        //   params      params传参的参数
        //   query       query传参的参数
		}
		methods{
				//里面可以写方法和操作ajax什么的
		}
        
      }