Vue Router的安装与基本使用方法

明月清风徐徐

已于 2024-04-29 22:26:24 修改

阅读量1.7k

点赞数 17

文章标签： vue.js 前端

于 2024-04-29 22:22:14 首次发布

本文链接：https://blog.csdn.net/qq_40930841/article/details/138324925

版权

一、了解为何使用路由

•具体使用示例：网易云音乐网易云音乐

•单页面应用(SPA)：所有功能在一个html页面上实现

•前端路由作用：实现业务场景切换（一个路由路径对应一个组件）

•优点：整体不刷新页面，用户体验更好，数据传递容易，开发效率高。

•缺点：首次加载（要加载所有的静态资源）会比较慢一点。

二、Vue Router的使用步骤：

1.下载vue-router模块

yarn create vite my-router --template vue
cd my-router
yarn
# 安装路由（@4表示安装vue-router的版本号为4，即Vue Router4），需要注意在安装路由时，不执行yarn dev启动项目，若项目已经启动了则需要Ctrl+C取消启动
yarn add vue-router@4 --save
yarn dev

安装完成后可以在package.json中看到router的版本

2.定义需要用到的组件

在src\components目录下创建Home.vue文件和About.vue文件，并为组件简单设置样式。

<!-- About.vue文件 -->
<template>
  <div class="about-container">
    <h3>About组件</h3>
  </div>
</template>

<style scoped>
.about-container {
  min-height: 150px;
  background-color: #f2f2f2;
  padding: 15px;
}
</style>

<!-- Home.vue文件 -->
<template>
  <div class="home-container">
    <h3>Home组件</h3>
  </div>
</template>

<style scoped>
.home-container {
  min-height: 150px;
  background-color: #f2f2f2;
  padding: 15px;
}
</style>

3.创建路由模块——路径和组件名对应关系（创建路由实例对象，导出实例对象）

在src目录下新建router.js文件作为路由模块。之后在router.js文件中补充以下内容：

导入createRouter()函数和createWebHashHistory()函数，其中createRouter()函数用于创建路由的实例对象, createWebHashHistory()函数用于指定路由的工作模式为Hash模式。

import { createRouter, createWebHashHistory } from "vue-router"

导入需要用到的组件

import Home from "./components/Home.vue"

import About from "./components/About.vue"

创建路由实例对象，其中routes数组用于定义路由匹配规则，path表示路径，component表示该路径对应的要显示的组件（路由即是路径与组件的一一对应关系，在此体现）。

const router = createRouter({

history: createWebHashHistory(),

routes: [

{ path: '/home', component: Home },

{ path: '/about', component: About },

]

})

导出路由实例对象

export default router

总结，router.js文件的内容如下：

import { createRouter, createWebHashHistory } from "vue-router"

import Home from "./components/Home.vue"
import About from "./components/About.vue"

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/home', component: Home },
        { path: '/about', component: About },
    ]
})

export default router

4.在main.js中导入并挂载路由模块

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'  // 这里的App.vue是一个单文件组件,是程序的入口文件

import router from './router.js' // 导入路由实例对象

const app = createApp(App)
app.use(router)   // 将路由实例对象挂载到应用实例对象上
app.mount('#app')

// 注意createApp(App).mount('#app') 是默认的写法，我们将其替换为：const app = createApp(App)和app.mount('#app')，并在两者中间写入app.use(router)

5.定义路由链接和路由视图

删除src/App.vue这个默认的程序的入口文件的内容，仅保留Vue3的基本语法，如下：

<template>

</template>

<script setup>

</script>
 
<style></style>

为其添加如下内容，其中<router-link></router-link>标签可以理解为<a></a>标签，to属性表示链接地址，需要与路由模块router.js中路由对象routes中的path相一致。

<router-view></router-view>标签用于定义路由视图，当url的路径切换时，显示路由模块router.js规则中路径对应的组件，可以理解为占位符。

1)当点击“首页”这个超链接时，url中的路径会被切换为/home，vue router会去路由模块router.js规则中寻找‘/home’对应的组件 { path: '/home', component: Home }，找到对应的组件是Home组件（而Home组件来自import Home from "./components/Home.vue"），于是会在<router-view></router-view>路由视图的位置显示Home组件。

2)或者当url中#后的哈希值被手动更改为/home时，vue router也会去路由模块router.js规则中寻找‘/home’对应的组件，并在<router-view></router-view>路由视图的位置显示。

<template>
  <div class="app-container">
    <h3>App根组件</h3>
    <!-- <a href="#/home">首页</a>
    <a href="#/about">关于</a> -->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>


<style scoped>
.app-container {
  text-align: center;
  font-size: 16px;
}

.app-container a {
  padding: 10px;
  color: #000;
}

/* 为激活的路由链接设置高亮模式 */
.app-container a.router-link-active {
  color: #fff;
  background-color: #bb1212;
}
</style>