Vue Router(路由)的基础介绍

什么是路由(what)?
根据不同的路径显示不同的页面(组件)。
vue router的入门

  1. 我们使用vue-cli脚手架可以生成 vue router,
    在这里插入图片描述
    如果你在你的vue项目里没有看到router,使用npm install vue-router进行安装。
  2. 我们在src下进入router打开index.js文件(就是上面的图片里的index.js)
  3. 开始配置:
    首先导入vue router:在这里插入图片描述
    引入vue组件:
    在这里插入图片描述
    还是这个页面,接着配置路由
    在这里插入图片描述
    在你要使用路由的页面上
    在这里插入图片描述
    最后vue项目跑起来,在页面上你就会看到这个:

在这里插入图片描述
这是一个比较简单的路由,下面我们开始深入路由。
还是在于之前配置路由的index.js文件下,
导入我们创建的模板和路径:
在这里插入图片描述
还是这个页面,配置路由
在这里插入图片描述
在我们要用的组件中引用:
ex;在hello.vue 下
在这里插入图片描述
最后我们在页面上就会看到:
在这里插入图片描述
vue router 的基本使用完成了,希望你看了之后自己动手打一遍,这样你才能真的掌握。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值