中山做网站的公司,北京建筑总公司,网站开发的合同,沈阳建站培训在Vue 3中#xff0c;我们可以通过路由的查询参数来传递数据。这意味着我们可以在不同的页面之间传递一些信息#xff0c;以便页面可以根据这些信息来显示不同的内容或执行不同的操作。 查询参数的使用方式类似于在URL中添加附加信息#xff0c;以便页面之间可以根据这些信息…
在Vue 3中我们可以通过路由的查询参数来传递数据。这意味着我们可以在不同的页面之间传递一些信息以便页面可以根据这些信息来显示不同的内容或执行不同的操作。 查询参数的使用方式类似于在URL中添加附加信息以便页面之间可以根据这些信息进行交互和通信。这在很多应用中都非常有用例如搜索功能、过滤功能、分页功能等等。
举个例子假设我们有一个商品列表页面用户可以在搜索框中输入关键字来搜索商品。当用户点击搜索按钮时我们可以将输入的关键字作为查询参数添加到URL中然后跳转到商品列表页面。在商品列表页面我们可以通过读取查询参数的值来获取用户输入的关键字并根据关键字来展示匹配的商品。
比如我在News组件中的detail使用了RouterLink组件来创建一个链接指向径/news/detail 并且附带了查询参数a哇哈哈,b华为,c小米。{、显示了新闻的标题。当用户点击这个链接时URL将会变成/news/detail?a1,b2,c3。注意查询参数使用问号?来分隔路径和查询字符串。
未加参数前 加参数后 当我点击新闻里的标题时就会看到路径中附带的参数 但这并不是动态参数的绑定即无论你点击哪个新闻标题都是出现同一样的URL。 所以现在要讲到动态参数的绑定即我点击不同的新闻标题时可以对应出现不同的参数
1.路由-query参数
路由的查询参数是一种在URL中传递数据的机制。它们可以用于在不同的路由之间传递参数以便组件可以根据这些参数进行不同的行为或显示不同的内容。
1.1 query参数的第一种写法
1.News组件传递query参数。注意
在to前面加上:在to的 内加入反引号数字1的左边用$ 连接对象 2.query传参后在detail组件中修改内容 解析
以上使用了route.query来访问查询参数。通过route.query.id、route.query.title和route.query.content可以获取URL中的id、title和content查询参数的值并将它们显示在列表项中。
在script setup部分使用useRoute()函数从Vue Router中导入了route对象并将它设置为响应式变量。这样就可以在模板中使用route.query来访问查询参数的值。3.展示 News组件代码
templatediv classnews!-- 导航区 --ulli v-fornews in newsList :keynews.idRouterLink :to/news/detail?id${news.id}title${news.title}content${news.content}{{news.title}}/RouterLink/li/ul!-- 展示区 --div classnews-contentRouterView/RouterView/div/div
/templatescript setup langts nameNewsimport {reactive} from vue//import {RouterView,RouterLink} from vue-routerconst newsList reactive([{id:title01,title:很好的抗癌食物,content:西篮花},{id:title02,title:如何一夜暴富,content:学IT},{id:title03,title:震惊万万没想到,content:明天是周一},{id:title04,title:好消息好消息,content:快过年了}])/scriptstyle scoped
/* 新闻 */
.news {padding: 0 20px;display: flex;justify-content: space-between;height: 100%;
}
.news ul {margin-top: 30px;list-style: none;padding-left: 10px;
}
.news lia {font-size: 18px;line-height: 40px;text-decoration: none;color: #64967E;text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {width: 70%;height: 90%;border: 1px solid;margin-top: 20px;border-radius: 10px;
}
/style
Detail组件代码
templateul classnews-listli编号:{{ route.query.id }}/lili标题:{{ route.query.title }}/lili内容:{{ route.query.content }}/li/ul/templatescript setup langts nameAboutimport { useRoute } from vue-router;let route useRoute();/scriptstyle scoped.news-list {list-style: none;padding-left: 20px;}.news-listli {line-height: 30px;}/style 1.2 query参数的第二种写法
跳转并携带query参数to的对象写法 代码
templatediv classnews!-- 导航区 --ulli v-fornews in newsList :keynews.id!-- //第一种写法RouterLink :to/news/detail?id${news.id}title${news.title}content${news.content}{{news.title}}/RouterLink --!-- 第二种写法 --RouterLink :to{//name:xiang, //用name也可以跳转path:/news/detail,query:{id:news.id,title:news.title,content:news.content}}{{news.title}}/RouterLink/li/ul!-- 展示区 --div classnews-contentRouterView/RouterView/div/div
/templatescript setup langts nameNewsimport {reactive} from vue//import {RouterView,RouterLink} from vue-routerconst newsList reactive([{id:title01,title:很好的抗癌食物,content:西篮花},{id:title02,title:如何一夜暴富,content:学IT},{id:title03,title:震惊万万没想到,content:明天是周一},{id:title04,title:好消息好消息,content:快过年了}])/scriptstyle scoped
/* 新闻 */
.news {padding: 0 20px;display: flex;justify-content: space-between;height: 100%;
}
.news ul {margin-top: 30px;list-style: none;padding-left: 10px;
}
.news lia {font-size: 18px;line-height: 40px;text-decoration: none;color: #64967E;text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {width: 70%;height: 90%;border: 1px solid;margin-top: 20px;border-radius: 10px;
}
/style
补充 有时候你会觉得比较冗余是否能简化一下可以的。 整体代码
templateul classnews-listli编号{{ query.id }}/lili标题{{ query.title }}/lili内容{{ query.content }}/li/ul
/templatescript setup langts nameAboutimport {toRefs} from vueimport {useRoute} from vue-routerlet route useRoute()let {query} toRefs(route)/scriptstyle scoped.news-list {list-style: none;padding-left: 20px;}.news-listli {line-height: 30px;}
/style 2.路由-params参数 2.1 params参数的第一种写法
1.还原Detail组件 2.还原News组件 3.在index.ts文件中子路的规则下占位 4.返回News组件中传入参数 5.我们可以通过console.log(route)观察params的参数这步骤可无 6.修改Detail组件的展示区开始变成响应式 7.修改News组件的内容也是变成响应式 展示这是标题1的后面点击其他标题展示区会对应出现内容就不一一展开了 2.2. params参数的第二种写法
跟query的第二种写法类似但有一点要区分 注意这里是用name配置项的 而不是用path配置项。
那如果我偏用path来配置呢那就喜提报错 Detail组件代码
templateul classnews-listli编号{{ route.params.id }}/lili标题{{ route.params.title }}/lili内容{{ route.params.content }}/li/ul/templatescript setup langts nameAboutimport {useRoute} from vue-routerconst route useRoute()console.log(route)/scriptstyle scoped.news-list {list-style: none;padding-left: 20px;}.news-listli {line-height: 30px;}/style
News组件代码
templatediv classnews!-- 导航区 --ulli v-fornews in newsList :keynews.id!-- //第一种写法RouterLink :to/news/detail/${news.id}/${news.title}/${news.content}{{news.title}}/RouterLink --!-- 第二种写法 --RouterLink :to{name:xiangqing,params:{id:news.id,title:news.title,content:news.content}}{{news.title}}/RouterLink/li/ul!-- 展示区 --div classnews-contentRouterView/RouterView/div/div
/templatescript setup langts nameNewsimport {reactive} from vue//import {RouterView,RouterLink} from vue-routerconst newsList reactive([{id:title01,title:很好的抗癌食物,content:西篮花},{id:title02,title:如何一夜暴富,content:学IT},{id:title03,title:震惊万万没想到,content:明天是周一},{id:title04,title:好消息好消息,content:快过年了}])/scriptstyle scoped
/* 新闻 */
.news {padding: 0 20px;display: flex;justify-content: space-between;height: 100%;
}
.news ul {margin-top: 30px;list-style: none;padding-left: 10px;
}
.news lia {font-size: 18px;line-height: 40px;text-decoration: none;color: #64967E;text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {width: 70%;height: 90%;border: 1px solid;margin-top: 20px;border-radius: 10px;
}
/style 补充
参数可传可不传的情况比如 再次提醒
1.传递params参数时若使用to的对象写法必须使用name配置项不能用path。
2.传递params参数时需要提前在规则中占位。
