美文网首页
vue-router 学习笔记(持续更新)

vue-router 学习笔记(持续更新)

作者: ANoman_M | 来源:发表于2017-09-21 22:56 被阅读0次

初学vue2.0,作为一个偏向于three.js的前端来说,深刻的感受到了vue的魅力。本文将持续追踪本人学习vue中路由模块的进程,并且将自己的心得体会分享给大家~
官方API
初学vue2.0,作为一个偏向于three.js的前端来说,深刻的感受到了vue的魅力。本文将持续追踪本人学习vue中路由模块的进程,并且将自己的心得体会分享给大家~
官方API

一个简单的路由

官网demo通过直接引用vue和相关文件,仅仅用了10行左右的代码就实现了一个最基本的路由。
那么,我们使用vue脚手架搭建的项目要如何实现呢?
1.安装vue-router(不懂的可以看api)
2.配置路由
找到src目录,结构如下:

image.png
找到router里面的index.js,导入最基本的vue和vue-router。通过调用use()来使用路由工具。之后,导入(import)你的一系列路由页面,并且进行配置。(@代表src目录)下面的配置展示导入了三个路由页面(即vue单文件组件); image.png

3.在main.js里面引入你配置的router模块。

image.png

4.最后一步,在app.vue,也就是主页面定义跳转逻辑。

image.png
这里使用router-link(最终渲染成a标签),并且通过to属性指定路由地址和绑定click事件使用$router.push效果是一样的。
其中router-view标签是路由跳转显示的部分。
至此,一个简单的路由就以完成啦~打开页面,点击不同的按钮,视图也会发生变化:)
一个简单的路由

官网demo通过直接引用vue和相关文件,仅仅用了10行左右的代码就实现了一个最基本的路由。
那么,我们使用vue脚手架搭建的项目要如何实现呢?
1.安装vue-router(不懂的可以看api)
2.配置路由
找到src目录,结构如下:

image.png
找到router里面的index.js,导入最基本的vue和vue-router。通过调用use()来使用路由工具。之后,导入(import)你的一系列路由页面,并且进行配置。(@代表src目录)下面的配置展示导入了三个路由页面(即vue单文件组件); image.png

3.在main.js里面引入你配置的router模块。

![Uploading image_636411.png . . .]

4.最后一步,在app.vue,也就是主页面定义跳转逻辑。

image.png
这里使用router-link(最终渲染成a标签),并且通过to属性指定路由地址和绑定click事件使用$router.push效果是一样的。
其中router-view标签是路由跳转显示的部分。
至此,一个简单的路由就以完成啦~打开页面,点击不同的按钮,视图也会发生变化:)

相关文章

网友评论

      本文标题:vue-router 学习笔记(持续更新)

      本文链接:https://www.haomeiwen.com/subject/upztextx.html