vue中的路由及嵌套路由

路由是vue的核心。
使用npm install --save vue-router中来使用。

在文件夹下将vue-router导入,并且声明要使用vue-router;
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

假设有home和about两个vue组件。那么我们在注册路由的使用需要定义一下内容。
path为需要跳转的路径。同时,需要在使用路由的父组件中使用<router-view></router-view>将路由渲染到当前组件中。

同时,使用<router-link to="路径"></router-link> 其中的路径就是我们在上面注册的path.
需要注意的是,我们现在在声明并且注册路由之后,需要将路由挂在到vue的实例中,否则是无法使用的。 
效果图如下:

嵌套路由,顾名思义,就是在router中在使用router,注册的方法和上面相差不多,但是,注册子路由是需要在children中进行注册。我们还是在上面的例子中来进行,新建xiaohong.vue和xiaoming.vue。假设我接下来要在about中使用嵌套路由。那么,我们需要在about中来注册子路由的相关信息。

children声明了children中的内容就是在about组件中使用。

因为我们是在about组件中使用子路由,方法还是与普通路由相同,在about.vue中使用<router-view>,并且使用<router-link to=""></router-link>来定义跳转的组件。
 
效果图如下:

2018年5月7日补:
在某些情况下,我们不能单纯的通过router-link来直接跳转到某个页面,因此,我们可以在我们需要的地方添加点击事件,在methods中定义方法让页面跳转到我们需要的路由中。
go(){
 this.$router.push({path:'/path'})
}

猜你喜欢

转载自blog.csdn.net/qq_36529459/article/details/79613187