vue 实例化定义路由模板

Posted 2020-10-23 web前端

　<div id="app">
    <router-view></router-view>
  </div>
  <template id="a">
    <div @click="link">hello</div>
  </template>
  <template id="b">
    <div>world</div>
  </template>

  const Home = Vue.extend({
    template: "#a",
    data: function() {
      return {}
    },
    methods: {
      link: function () {
        this.$router.push(‘/b‘)
      }
    }
  })
  const B = Vue.extend({
    template: "#b"
  })
  // 路由
  const routes = [
    {path:‘/‘,component:Home},
    {path:‘/b‘,component:B}
  ];
  const router = new VueRouter({
    routes
  })
  new Vue({
    el:"#app",
    router
  })