Angular开发问题：如何阻止router-link跳转及实现标题仅在首页显示

Hey there! Let's tackle your two questions one by one based on your Vue code snippet:

1. Preventing router-link navigation when clicking "View Student" #

If you want to completely stop the router-link from triggering its default navigation behavior, the easiest way is to use Vue's @click.prevent event modifier directly on the <a> tag. This will override the link's native jump action:

<li class="nav-item ">
  <a 
    routerLink="view-student" 
    class="nav-link btn btn-primary active" 
    role="button"
    @click.prevent
  >View Student</a>
</li>

If you need conditional logic (e.g., only prevent navigation when a certain condition is met), you can bind a custom method instead:

// In your component's script section
methods: {
  handleViewStudentClick(event) {
    // Add your custom condition here
    if (someCheckFails) {
      event.preventDefault(); // Block the navigation
      // Run your alternative logic here
    }
  }
}

Then update the template to use this method:

<li class="nav-item ">
  <a 
    routerLink="view-student" 
    class="nav-link btn btn-primary active" 
    role="button"
    @click="handleViewStudentClick"
  >View Student</a>
</li>

2. Show title only on the homepage, hide it on other pages #

You can leverage Vue Router's $route object to check the current route, then use v-if to conditionally render the title container. Assuming your homepage uses the root path (/):

<div class="container p-3 my-3 bg-primary text-white" v-if="$route.path === '/'">
  <h1>Welcome, click on the button below to see all students!</h1>
</div>

For better maintainability (in case you change the homepage path later), you can also check the route's name instead (if you've defined a name for your homepage route, e.g., name: 'home'):

<div class="container p-3 my-3 bg-primary text-white" v-if="$route.name === 'home'">
  <h1>Welcome, click on the button below to see all students!</h1>
</div>

This will automatically hide the title as soon as you navigate to the /view-student page (or any other non-homepage route).

内容的提问来源于stack exchange，提问作者a_l_e_x