初学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标签是路由跳转显示的部分。至此，一个简单的路由就以完成啦~打开页面，点击不同的按钮，视图也会发生变化:)
网友评论