vue安装router命令（vue-router安装）

大家好，我是讯享网，很高兴认识大家。

 <p><img alt="" height="1043" src="https://i-blog.csdnimg.cn/blog_migrate/1954ecd4216bad7.png" width="1200" /></p>

讯享网

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

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

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

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

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

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.定义需要用到的组件

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

讯享网

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

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

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

import { createRouter, createWebHashHistory } from “vue-router”

导入需要用到的组件

import Home from “https://blog.csdn.net/_/article/details/components/Home.vue"

import About from ”https://blog.csdn.net/_/article/details/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文件的内容如下：

讯享网

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

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

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

讯享网

为其添加如下内容，其中<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 “https://blog.csdn.net/_40930841/article/details/components/Home.vue"），于是会在<router-view></router-view>路由视图的位置显示Home组件。

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