【Vue】vue-router页面路由（详细易上手）

1.安装vue-router

npm install vue-router

从 npm 5.0.0 版本开始，默认情况下执行 npm install 命令时会自动保存安装的包信息到 package.json 文件中，不再需要使用 --save 参数。

这里顺便分享个小知识，--port xx可以设置端口为xx，--open可以设置服务器启动后自动打开网页。

2.新建两个路由页面

新建一个文件夹存放路由页面，一般命名为views。

在views文件夹下新建RouterTestOne.vue和RouterTestTwo.vue,作为路由页面。

<template>
  <h2>this is RouterTestOne!</h2>
</template>

<template>
  <h2>this is RouterTestTwo!</h2>
</template>

3.新建路由映射的js文件

新建router文件夹，在其下新建index.js文件。作用是创建 Vue Router 实例，并定义了路由的路径与组件之间的映射关系，以及路由的模式为 HTML5 History 模式。

 import {createRouter, createWebHistory} from "vue-router";：这行代码从 Vue Router 库中导入了 createRouter 和 createWebHistory 方法。createRouter 用于创建路由实例，而 createWebHistory 用于指定路由模式为 HTML5 History 模式。

import RouterTestOne from "@/views/RouterTestOne.vue"; 和 import RouterTestTwo from "@/views/RouterTestTwo.vue";：这两行代码是导入了两个视图组件，分别是 RouterTestOne 和 RouterTestTwo。这些组件将在路由中被使用。

const router = createRouter({ ... });：这里调用了 createRouter 方法来创建路由实例，并将返回的实例赋值给了 router 变量。在 createRouter 方法的参数对象中，传入了 history 和 routes 选项。history 选项使用了 createWebHistory() 方法来创建路由的历史记录管理器，指定了路由模式为 HTML5 History 模式。routes 选项则定义了路由的各个路径与组件的对应关系。

export default router;：最后一行将 router 路由实例导出，以便在其他文件中使用。

路径中常用符号：

@：这通常表示项目的根目录。在一些 Vue CLI 创建的项目中，@ 符号用于指代 src 目录，因此可以通过 @ 来引用项目的根目录下。

./：这表示当前目录。使用 ./ 来引用当前文件所在的目录中的文件或目录。

../：这表示上一级目录。使用 ../ 来引用当前文件所在的上一级目录中的文件或目录。

注意：是routes不是routers！！！

import {createRouter, createWebHistory} from "vue-router";
import RouterTestOne from "@/views/RouterTestOne.vue";
import RouterTestTwo from "@/views/RouterTestTwo.vue";

const router = createRouter({
        history: createWebHistory(),
        routes: [   //注意是routes不是routers
            {path: '/RouterTestOne', component: RouterTestOne},
            {path: '/RouterTestTwo', component: RouterTestTwo},
        ]
    }
)

export default router;

4.修改main.js导入router

1.导入 createApp 方法和 App 组件，以及之前创建的 router 路由对象。

2.使用 createApp 方法创建一个 Vue 应用实例，并传入 App 组件（即App.vue）作为根组件。

3.使用 use 方法将 router 路由对象添加到 Vue 应用实例中，以便在应用中使用路由功能。

4.使用 mount 方法将 Vue 应用实例挂载到页面中的 #app 元素（对应下图）上，使应用开始运行。

 

mount('#app') 操作的作用是将 Vue 应用实例挂载到 HTML 页面中的指定元素上，这里指定的元素是 id 为 app 的元素。

具体来说，它会在 HTML 页面中找到 id 为 app 的元素，并将 Vue 应用实例渲染到这个元素中，使得 Vue 应用可以在页面中展示和运行。

 

import {createApp} from 'vue'
import App from './App'
import router from "@/router";

createApp(App).use(router).mount('#app')

 5.修改App.vue挂载路由组件

这段代码定义了一个导航栏 (<nav>)，其中包含两个路由链接 (<router-link>) 和一个路由视图 (<router-view>)。具体解释如下：

<nav class="nav-links">...</nav>：定义了一个导航栏，具有 nav-links 类名，用于包裹导航链接和路由视图。

<router-link to="/RouterTestOne">RouterTestOne</router-link>：定义了一个路由链接，点击后会导航到 /RouterTestOne 路径对应的组件。显示的文本内容为 "RouterTestOne"。

<router-link to="/RouterTestTwo">RouterTestTwo</router-link>：定义了另一个路由链接，点击后会导航到 /RouterTestTwo 路径对应的组件。显示的文本内容为 "RouterTestTwo"。

<router-view></router-view>：定义了一个路由视图，用于渲染当前路由对应的组件内容。当导航到不同的路径时，路由视图会自动渲染对应路径的组件内容。

实现在导航栏中显示不同的链接，点击链接后可以展示对应路径的组件内容。

注意： <router-view></router-view>一定要有，不然点击链接后无反应！！！

<template>
  <nav class="nav-links">
    <router-link to="/RouterTestOne">RouterTestOne</router-link>
    <router-link to="/RouterTestTwo">RouterTestTwo</router-link>
    <router-view></router-view>
  </nav>
</template>

 

启动服务器，打开界面如下，点击不同的链接会跳转不同的组件：

 

但是可以看到，两个链接凑一块了，需要修改一下css样式。

6.修改App.vue的style更改样式

设置外边距为20px，颜色为紫色。

注意：是.nav-links a而不是.nav-links router-link！！！

运行后如下所示，链接成功分开。

</script>
.nav-links a {
  margin: 20px;
  color: purple;
}
</style>

 （by 归忆）