2025年vue 路由安装（vue路由安装命令）

科技前沿 • 2025-06-08 23:17 • 阅读 18

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

 <div id="navCategory"></div><p>vue-router 是 Vue 的一个插件库，适用于构建单页面应用。</p>

单页面应用：整个应用中只有一个完整的页面，切换页面就是替换页面中的内容。

工作原理：当浏览器的路径发生改变时，路由器会自动显示路径所对应的组件。

嵌套路由：通过路由实现组件的嵌套展示，就叫做嵌套路由。

注：由于 vue-router 4 及以上的版本只能在 vue3 中使用，所以我们需要安装 vue-router 3 的版本。

安装指定版本：

npm install vue-router@版本号

安装最新版本：

npm install vue-router

在 src 目录下创建 views 文件夹，并创建 Home.vue 和 About.vue 组件。

备注：router-link 标签类似于 a 标签，而 to 属性和 a 标签的 href 属性作用相似。

在 src 目录下创建 router 文件夹，并在文件夹内创建 index.js 文件，添加以下内容。

引入组件的区别：

方式一：直接导入，就是在应用第一次执行时，就会加载这个文件。

方式二：路由懒加载，就是跳转到这个页面的时候，再去加载这个文件。

在 main.js 文件中引入 router，并挂载到 vue 实例上

在 App.vue 组件中设置 router-view 标签，指定组件呈现位置。

这样就配置好了，当点击链接时会修改浏览器的路径，从而显示对应的组件。

注意：

  路由组件通常放在 views 文件夹内，而一般组件放在 components 文件夹内。

  跳转页面时，会先将当前组件销毁，再去加载新组件。

  每个组件都有自己的 $route 属性，里面存放着自己的路由信息。</p> <p>  整个应用只有一个 $router 路由器，可以通过组件的 $router 属性获取。

到此这篇关于Vue router 路由安装以及使用的文章就介绍到这了,更多相关Vue router 路由安装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！