如何为VueRouter中的每个组件动态更改路由？
如何为VueRouter中的每个组件动态更改路由？
提问于 2021-01-22 20:14:34
我正在尝试在我的应用程序中使用动态路由。
我有包含3个静态博客的主要路线'/ blogs‘，我希望每个博客都应该呈现自己的内容，比如'/blogs/ blog -1’，对于博客2，比如'/blogs/ blog -2'，我已经尝试过文档，但由于我是初学者，我无法理解。
这是我对所有组件的代码，
router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/views/Home.vue'
import Blogs from './components/views/Blogs.vue'
import Blog_1 from './components/blogs/Blog_1';
import Blog_2 from './components/blogs/Blog_2';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: "/",
component: Home,
},
{
path: "/blogs",
component: Blogs,
children: [
{
path: 'blog-1',
component: Blog_1
},
{
path: 'blog-2',
component: Blog_2
}
]
},
],
scrollBehavior(to,) {
if (to.hash) {
return {
el: to.hash,
behavior: 'smooth',
top: 0
}
}
},
});
export default router;这是Blog.vue，它包含所有的静态博客，不是全部，而是一半
<template>
<!-- ***** Blog Start ***** -->
<section class="section" id="blog">
<div class="container">
<!-- ***** Section Title Start ***** -->
<div class="row">
<div class="col-lg-12">
<div class="center-heading">
<h2 class="section-title">Blog Entries</h2>
</div>
</div>
<div class="offset-lg-3 col-lg-6">
<div class="center-text">
<p>
Integer molestie aliquam gravida. Nullam nec arcu finibus,
imperdiet nulla vitae, placerat nibh. Cras maximus venenatis
molestie.
</p>
</div>
</div>
</div>
<!-- ***** Section Title End ***** -->
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="blog-post-thumb">
<div class="img">
<img src="assets/images/1x/blog-item-01.png" alt="" />
</div>
<div class="blog-content">
<h3>
<a href="#">Online Presence of Business</a>
</h3>
<div class="text">
As Covid-19 came, it throttled small and medium businesses in
great depth. Not every one can recover from it.
</div>
<a href="#" class="main-button">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="blog-post-thumb">
<div class="img">
<img
height="220"
width="370"
src="assets/images/1x/blog-item-02.jpg"
alt=""
/>
</div>
<div class="blog-content">
<h3>
<a href="#"
>Why Having a Website is Important for a small business?</a
>
</h3>
<div class="text">
The number of small businesses with a website is surprisingly
low despite the growth in technology.
</div>
<a href="#" class="main-button">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="blog-post-thumb">
<div class="img">
<img
height="220"
width="370"
src="assets/images/1x/blog-item-03.jpg"
alt=""
/>
</div>
<div class="blog-content">
<h3>
<a href="#">Impact of Advertisment on Customer</a>
</h3>
<div class="text">
Have you ever thought, why giant companies such as apple,
google, Samsung invest millions on advertisement?
</div>
<a href="#" class="main-button">Read More</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ***** Blog End ***** -->
</template>因为我想点击阅读更多，所以它应该转到完整的文章，它应该在另一个组件中。
谢谢
回答 1
Stack Overflow用户
发布于 2021-01-22 20:20:54
您可以使用route params来匹配这些插件：
routes: [
{
path: "/",
component: Home,
},
{
path: "/blogs/:slug", // This `:` syntax means it's a variable
name: 'blogs',
component: Blogs
},
],(您不需要您拥有的子路由。)当您使用这样的路由参数时，:slug段可以替换为您喜欢的任何内容。因此，如果您确实访问了像/blogs/blog-1这样的路由，它将匹配该路由。动态部分将在组件中可用，如
this.$route.params.slug在本例中，它将显示"blog-1“。另外，请注意，我为该路由指定了一个名称“博客”。这就是说，当您想要访问该路由时，可以使用如下<router-link>：
<router-link :to="{ name: 'blogs', params: { slug: 'blog-1' }}">
Blog 1
</router-link>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65845007
复制相关文章
相似问题
腾讯云开发者
