组件动态路由以及二级路由

动态路由的实现：把某种模式匹配到所有路由，映射到同一个组件。

代码案例：

const User = {

  template: '<div>User</div>'

}



const router = new VueRouter({

  routes: [

    // 动态路径参数 以冒号开头

    { path: '/user/:id', component: User }

  ]

})

如上图所示，动态路由即用:参数表示，通过对参数的设置动态选择显示的组件。参数值被设置在匹配的组件的this.$route.params中。如果一级目录相同，二级目录之间的相互跳转会对相同的组件进行复用【意味着相同的组件不会被销毁，继续它的生命周期，故不会进行初始化等，因此对值的改变可以选择监督值的变化进行相应的改变】

// 给出一个路由 { path: '/user-*' }

this.$router.push('/user-admin')

this.$route.params.pathMatch // 'admin'

// 给出一个路由 { path: '*' }

this.$router.push('/non-existing')

this.$route.params.pathMatch // '/non-existing'

对上述的一个案例，路由匹配，上面可暂且分为两组一组是切换到/user-admin组件，另外一组是切换的/non-existing如果第一个路由没有匹配的组件就会进行第二个。

 

二级路由，又叫嵌套路由，在一个组件中，一般默认/开头的路径被当做根路径，通过对路由children的设置来进行二级路径设置。

const router = new VueRouter({

  routes: [

    {

      path: '/user/:id', component: User,

      children: [

        // 当 /user/:id 匹配成功，

        // UserHome 会被渲染在 User 的 <router-view> 中

        { path: '', component: UserHome },



        // ...其他子路由

      ]

    }

  ]

})

二级路径暂且就解释到这里，接下来是组件的动态路由：

 

代码实例

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

在这个地方，就运用了动态组件，通过改变is的值来改变调用的组件。

<keep-alive>

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

</keep-alive>

这个相比于上面增加了<keep-alive>缓存功能：

差异在下面：

未点击时：

点击后：

 

切换：

返回：

通过返回时之间的差异可以观察得到，没有keep-alive时返回时会重新加载组件，而有keep-alive的标签在返回时会加载缓冲的内容。

 

全局方法：一种是通过对组件参数的设置，另外一种是通过借助Vuex，在这里就简单叙述下：

对组件简单设置：

声明：

import Public from "@/service/public";

Vue.prototype.$Public = Public;

 

然后则可以通过调用$Public来使用

 

对Vuex的使用：

引用Vuex：

安装：npm install vuex --save -g

 

引入：

import Vuex from "vuex"

Vue.use(Vuex);

 

创建：

const store = new Vuex.Store({

  state: {

    count: 0

  },

  mutations: {

    increment (state) {

      state.count++

    }

  }

})

 

使用：

const Counter = {

  template: `<div>{{ count }}</div>`,

  computed: {

    count () {

      return store.state.count

    }

  }

}

通过这个简单的例子可以看出来，Vuex在全局变量的上简单使用。