Vue + ElementUI 集成 Vue Router

npm install vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import routes from './routes'

Vue.use(ElementUI)
Vue.use(VueRouter);

Vue.config.productionTip = false;

const router = new VueRouter({
  routes
});

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

<template>
  <el-container>
    <router-view></router-view>
  </el-container>
</template>

(……)

import Home from './components/Home.vue';
import Tags from './components/Tags.vue';

const routes = [{
    path: '/',
    component: Home
  },
  {
    path: '/tags',
    component: Tags
  },
];

export default routes;

// Home.vue

<template>
  <div>
    Home
  </div>
</template>
<script>
  export default {

  }
</script>

watch: {
  '$route': function(to, from) {
    // 我这里还是用了 Vuex，不过应该不影响理解
    this.$store.dispatch('updateActiveTemplateId', this.$route.params.templateId)
    // 通过更新 Vuex 中的 store 的数据，让数据发生变化
    this.getTemplateById()
  }
},

beforeRouteUpdate(to, from, next) {
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this` 
},