2

我正在尝试在我的应用程序中使用动态路由。

我有包含 3 个静态博客的主路由“/blogs”，我想要的是每个博客都应该用自己的内容呈现，如“/blogs/blog-1”和博客 2，如“/blogs/blog-2”，我已经尝试过使用文档，但由于我是初学者而无法理解。

这是我所有组件的代码，

路由器.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>

因为我想点击阅读更多，所以它应该转到应该在另一个组件中的完整文章。

谢谢你

4

1 回答 1

1

您可以使用路由参数来匹配这些 slug：

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>
于 2021-01-22T12:20:54.070 回答