vue工程化之路由router

本文详细介绍如何在Vue.js项目中使用官方路由管理器router进行组件路由配置,包括安装依赖、配置路由选项、创建与导出路由,以及设置链接和组件渲染。

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

router可以译为路由器,在项目开发中是Vue.js 官方的路由管理器,主要功能是实现组件的路由配置

路由router的使用步骤:
①:在src/main.js入口文件中引入相关模块及组件
首先在src下新建个router目录,然后在里面新建个index.js文件。
-------此时会报错:找不到vue-router开发依赖,即未安装vue-route模块。-----可以运行npm install -save ver-router进行安装。

②:安装 vue 路由模块vue-router和网络请求模块vue-resource
–save参数???? 因为路由涉及到页面跳转,到后期项目生产环境中也会用到,所以这里用–save保存到项目生产依赖里。

③配置路由选项及渲染App组件(src/main.js入口文件)

④创建路由,配置路由映射并导出src/router/index.js
首先引入路由模块并使用

require读取模块

第一步:创建路由实例

自己的(下面)-------------第一步:创建路由实例

第二步:配置路由映射

自己的(下面)-----------------第二步:配置路由映射

第三步:导出路由配置

自己的(下面)-----------------第三步:导出路由配置

import…from…读取模块


I
I
l
这里是component,没加s

⑤设置链接router-link(src/App.vue)
(src/App.vue)

⑥设置路由映射组件渲染router-view(src/App.vue)----上图可见
路由链接router-link会被渲染成a链接,
router-view要想显示对应a链接的页面组件信息,
则需要router-view进行渲染展示。

但是:要记得在src/components下面创建_.vue文件

BaseView文件

自己创建vue文件

main.js
App.vue
router下面的index.js文件

当我们在Vue工程中配置了路由(Router)却发现它不起作用时,可能是由于以下几个原因: 1. 未安装或未正确导入Vue Router:首先要确保已经安装了Vue Router并成功导入到项目中。可以通过在命令行中运行`npm install vue-router`来安装Vue Router,并在项目的入口文件(如main.js)中使用`import VueRouter from 'vue-router'`导入。 2. 未在Vue实例中注册Vue Router:确保在Vue实例中注册了Vue Router。需要使用`Vue.use(VueRouter)`进行注册,并在Vue实例中通过`router`选项指定路由配置。 3. 未设置路由视图容器:在Vue组件中进行路由跳转时,需要在模板中指定一个容器用于渲染路由组件。可以通过在模板中使用`<router-view></router-view>`标签来设置路由视图容器。 4. 路由配置错误:检查路由配置是否正确。确保在路由配置中指定了正确的路径和对应的组件。 5. 未正确设置路由链接:当使用`<router-link>`标签进行路由跳转时,确保在标签中设置了正确的`to`属性,以指定跳转的路由路径。 6. 未启动路由:在实例化Vue Router时,需要调用`router.start(App, '#app')`来启动路由。其中`App`是根组件,`#app`是根元素的选择器。 如果以上问题都没有导致路由不起作用,可以尝试在浏览器的开发者工具中查看控制台输出,以便进一步分析错误原因。也可以检查是否存在其他冲突或错误的配置导致路由不起作用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值