vue-router基本用法

组件切换

就我的目前所知，Vue中切换组件有两种方式：

动态组件(:is属性绑定)

<component v-bind:is="currentTabComponent"></component>

查看官网介绍

查看官网示例

注意：

• 使用component:is的组件必须是局部注册 | 全局注册 | 组件初始对象。

惊喜：

• 该方法与keep-alive更配哟，切换到另外一组件时，能够保存当前组件状态。

keep-alive官方说明

keep-alive要注意，切换回来的时候，不会再触发created、mounted生命周期

路由跳转(Routes)

详见下述...

路由跳转(Routes)

1. 路由配置（一切的前提）

若是经过vue-cli脚手架初始化的项目，会在src/router/目录下有一个已建立好的路由配置：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

这里有两个概念，也是在程序中路由使用常常碰到的实例对象this.$router、this.$route：

this.$router：

能够简单的理解为new Router建立的路由实例，包含了全部路由(route)的配置信息。

this.$route：

能够简单的理解为routes中的当前所在路由的全部配置信息，如path、params、query、name...

---

指定路由切换的方式有两种，二选一便可：

2. 声明式路由切换(HTML)

• 直接经过to属性绑定字符串路径:

<router-link to="/path"></router-link>

或

• 经过:to动态绑定route对象:

<router-link :to="{
  path:'/path'
}"></router-link>

注意：

• 若route对象中配置了params属性，则目标跳转路径不能经过path指定，而要经过路由配置中的name指定，示例:to="{name:'HelloWorld',params:{id:'1234'}}"。

不爽之处：

• 经过router-link方法切换路由，若是想在该连接上绑定其它事件，不能直接经过@click，而须要@click.native。

---

2. 命令式路由切换(JS)

在程序中进行路由跳转的方式和HTML中差很少，只须要在须要跳转的位置，使用this.$router.push('/path')或

this.$router.push({
  path:'/path'
})

便可。

禁止路由跳转

组件比较挑食，在某些状况下，我是禁止进入你进入个人家门的，怎么禁止呢？

beforeRouteEnter(to,from,next){
  if(...){
    ...
    next(false); //不准进；
  }
}

路由生命周期注意项

component:is

经过该方法进行组件切换的，不是Url的变更，不会触发路由生命周期；

动态路由

'/user/:id'动态路径参数的变更，不会触发beforeRouteEnter生命周期，能够经过beforeRouteUpdate来监听变化。

其它

路由模式

Hash模式

Hash模式是指路由配置中的path不是进行页面的跳转，而是经过#链接的，框架内部处理的组件切换。

URL的井号(做者： 阮一峰)

History模式

History模式，没有#，URL显示与正常的URL同样，须要后台配合一些配置项（我的没怎么用过(^_^)）。