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



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

•单页面应用(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/_/article/details/components/Home.vue"），于是会在<router-view></router-view>路由视图的位置显示Home组件。

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

6.浏览器可视化页面

在浏览器中访问http://localhost:5173/，使用路由后的初始页面效果、单击“首页”路由链接后的Home组件的效果、单击“关于”路由链接后的About组件的效果如下图所示。

附本节项目代码下载地址：

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/32891.html