【Vue】六:路由(上)使用路由 多级路由

文章介绍了Vue.js开发中如何构建多页面应用和单页面应用,特别是单页面应用的路由设置。通过安装vue-router插件,在main.js中配置,并在router/index.js中定义路由。使用router-link和router-view来导航和展示组件。同时提到了多级路由的概念,以及组件的存放规则,如普通组件在components目录,路由组件在pages目录。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.多页面应用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2. 单页面应用(使用路由)

(1)安装vue-router插件

  • vue2 要安装 vue-router3
    npm i vue-router@3
  • vu3 要安装 vue-router4
    npm i vue-router@4

(2)main.js 中引入并使用 vue-router
new Vue 时添加新的配置项:一旦使用了 vue-router 插件,在 new Vue 的时候可以添加一个全新的配置项:router
在这里插入图片描述

(4)router 路由器的创建一般放在一个独立的 js 文件中,例如:router/index.js
在这里插入图片描述
(5)编写router
【index.js】
在这里插入图片描述
(6)使用 router-link 标签代替 a 标签(App.vue 中)
【App.vue】
在这里插入图片描述

<router-view></router-view>为一个占位符,指定组件最终展示的位置。

(7)测试
在这里插入图片描述

3. 多级路由

子组件:【shijiazhuang.vue】

在这里插入图片描述

父组件:【hebei.vue】

在这里插入图片描述
路由【index.js】

在这里插入图片描述

在这里插入图片描述
注意:一般普通组件存放在components中,路由组件存放在pages中。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值