Vue 路由如何实现不同页面渲染

在 Vue 应用开发中，实现不同页面的渲染是构建单页面应用（SPA）的关键环节。Vue 路由（Vue Router）为此提供了强大且便捷的解决方案，让开发者能够轻松管理页面导航与内容呈现。

需要创建路由实例。在 Vue 项目中，通常在 router 文件夹下的 index.js 文件里进行配置。通过引入 VueRouter 并创建 Router 实例，定义路由规则。例如：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

上述代码定义了两个路由，根路径 '/' 对应 Home 组件，'/about' 路径对应 About 组件。

在 Vue 组件中，通过 <router - view> 标签来渲染匹配到的组件。例如在 App.vue 中：

<template>
  <div id="app">
    <router - view></router - view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

这样，当用户访问应用的不同路径时，对应的组件就会在 <router - view> 位置渲染。

为了实现页面导航，Vue Router 提供了多种方式。最常见的是使用 <router - link> 组件，它会生成一个 a 标签来实现路由跳转。比如在 Home.vue 中添加一个跳转到 About 页面的链接：

<template>
  <div>
    <h1>Home Page</h1>
    <router - link to="/about">Go to About Page</router - link>
  </div>
</template>

另外，也可以在组件的 JavaScript 代码中通过编程式导航实现跳转。例如在 Home.vue 的 methods 中：

methods: {
  goToAbout() {
    this.$router.push('/about');
  }
}

通过上述方法，就能够轻松利用 Vue 路由实现不同页面的渲染与导航。无论是简单的页面切换，还是复杂的路由逻辑控制，Vue Router 都能提供有效的解决方案，助力开发者打造出流畅且功能丰富的单页面应用。