上面是将Forecast组件作为了Home的子组件使用,现在我们将其作为一个路由组件使用。
在router/index.js路由系统注册路由:
app.Vue中更新为:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsATOfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5SNzYzY5UmMhNTY1MjZkNjMmFTM0ITY5IjNiJTYlFzMl9CXyAzLcBTMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjL5M3Lc9CX6MHc0RHaiojIsJye.png)
1、路由跳转
vue-router提供了2种写法让我们实现页面跳转。
正如App.Vue中的使用:
2、传递参数
vue-router提供了2种用于开发中传递参数的方式给我们使用。
url地址的路径作为变量,传递参数到下一个页面组件中进行获取使用。
注册路由:
创建Article.vue:
最后在App.Vue中添加:
url地址的查询字符串作为参数,在下一个页面组件中进行获取使用。
创建Article2.vue: