Vue之路由

本文介绍如何在Vue项目中配置和使用路由功能,包括安装vue-router、设置路由路径及组件,并通过导航模块展示路由跳转效果。

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

                                           Vue之路由

今天来看看vue怎么实现路由功能。

我们在vue-cil脚手架搭建好的基础上来实现路由功能。如果搭建完初始化项目时没有路由功能则需在npm安装路由。命令:

npm install vue-router

然后在main.js中引用路由文件

import router from './router' 

并在实例化vue对象是使用他 

接下来我们就可以在app.vue中来使用路由功能。我们通过一个简单的导航模块来看看怎么实现路由功能。 

首先我们创建header模块来作为导航模块。我们使用boostrap4.0来创建导航栏

然后我们在app.vue中引入header.vue模块 具体命令:

import Header from '@/components/Header';

然后在components注册Header组件  :

就可以直接在app.vue的template中使用Header组件

我们在Header组件下面在写一个显示路由内容:<router-view/>

这个代表路由跳转的内容都显示在这里:

接下来我们在src目录下创建一个router文件夹用来存放路由的地址 并创建index.js文件

首先需要引入vue和vue-router:

import Vue from 'vue'
import Router from 'vue-router'

然后需要再写  Vue.use(Router)  来让vue使用路由组件

最后我们注册需要的每一个路由即可:

这里的mode:history是路由的 history 模式 让地址栏去掉“#”,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

path是路由的路径,name是路由名称,component是指显示哪一个组件。这里的component根据上面引入的组件来,需要先引入组件这里才可以用,例如:

录入index组件。

路由注册好之后,我们在导航栏的超链接里面输入我们注册的路由地址即可以在router-view中显示我们注册的组件内容

最终效果:

 

最终利用路由实现导航功能。 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值