Vue2和Vue3路由使用方式

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue2的路由使用方式

首先，确保你已经安装了vue-router的Vue 2版本。

安装vue-router（Vue 2）:

npm install vue-router@3

1. 定义路由（router/index.js）:

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({  
  mode: 'history', // 使用HTML5 History模式  
  base: process.env.BASE_URL,  
  routes: [  
    {  
      path: '/',  
      name: 'home',  
      component: Home  
    },  
    {  
      path: '/about',  
      name: 'about',  
      component: About  
    }  
  ]  
});

2. 在main.js中引入并使用路由:

import Vue from 'vue';  
import App from './App.vue';  
import router from './router'; // 引入路由配置  
  
Vue.config.productionTip = false;  
  
new Vue({  
  router, // 将路由实例注入到vue根实例中  
  render: h => h(App),  
}).$mount('#app');

tips: render: h => h(App), 这行代码做了以下几件事情：
定义了一个箭头函数：h => h(App) 是一个箭头函数，它接收一个参数 h（这里是 createElement 函数的别名），并返回 h(App) 的结果。
使用 h（即 createElement）创建了一个 VNode：h(App) 调用了 createElement 函数，并传入 App 组件作为参数。这意味着你告诉Vue：“在这个Vue实例的挂载点（在这个例子中是 #app 元素），请渲染 App 组件”。

Vue使用这个VNode来构建和更新DOM：Vue会接收这个 render 函数返回的 VNode，并使用它来构建或更新DOM。如果 App 组件或其子组件的数据发生变化，Vue将重新调用 render 函数来生成新的 VNode，并比较新旧VNode的差异，然后只更新DOM中需要改变的部分。

这种方式比使用模板（template）更加灵活和强大，因为它允许你使用JavaScript的全部编程能力来构建你的组件树。然而，对于大多数简单到中等复杂度的应用来说，使用模板通常更为方便和直观。不过，当你需要动态渲染大量组件或者进行复杂的条件渲染时，render 函数可能会成为更好的选择。

3. 在组件中使用路由（使用<router-link>和<router-view>）:

<!-- App.vue -->  
<template>  
  <div id="app">  
    <router-link to="/">Home</router-link> |  
    <router-link to="/about">About</router-link>  
  
    <router-view/>  
  </div>  
</template>

二、Vue3 的路由使用方式

Vue 3 使用路由的例子
首先，确保你已经安装了vue-router的Vue 3版本。

安装vue-router（Vue 3）:

npm install vue-router@4

1. 定义路由（router/index.js或router/index.ts）:

import { createRouter, createWebHistory } from 'vue-router';  
import Home from '../views/Home.vue';  
import About from '../views/About.vue';  
  
const routes = [  
  {  
    path: '/',  
    name: 'Home',  
    component: Home  
  },  
  {  
    path: '/about',  
    name: 'About',  
    component: About  
  }  
];  
  
const router = createRouter({  
  history: createWebHistory(process.env.BASE_URL),  
  routes  
});  
  
export default router;

2. 在main.js或main.ts中引入并使用路由:

import { createApp } from 'vue';  
import App from './App.vue';  
import router from './router'; // 引入路由配置  
  
const app = createApp(App);  
  
app.use(router); // 将路由插件安装到Vue应用中  
  
app.mount('#app');

3. 在组件中使用路由（使用<RouterLink>和<RouterView>，注意Vue 3中组件名的大小写敏感性）:

由于Vue 3的<script setup>语法糖和Composition API的流行，这里给出基于<script setup>的示例，但你也可以使用传统的<script>方式。

<!-- App.vue -->  
<template>  
  <div id="app">  
    <RouterLink to="/">Home</RouterLink> |  
    <RouterLink to="/about">About</RouterLink>  
  
    <RouterView/>  
  </div>  
</template>  
  
<script setup>  
// 在<script setup>中，你通常不需要直接操作路由，但可以通过useRouter和useRoute来编程式导航  
 import { useRouter, useRoute } from 'vue-router';  
 const router = useRouter();  
 const route = useRoute();  
</script>

注意：在Vue 3中，<router-link>和<router-view>在模板中应该大写为<RouterLink>和<RouterView>（尽管Vue 3的模板编译器通常能够容忍这种大小写不一致，但遵循官方文档和Vue 3的命名习惯是一个好习惯）。然而，为了与Vue Router的官方文档保持一致，并在实际项目中避免潜在的混淆，建议始终使用<RouterLink>和<RouterView>。