vue 实例化定义路由模板

最新推荐文章于 2023-04-27 11:34:29 发布

转载最新推荐文章于 2023-04-27 11:34:29 发布 · 240 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kelly07/p/8430643.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用Vue.js的简单示例，包括组件间的导航与切换。通过定义不同的模板和组件，演示了如何利用Vue-router进行页面跳转。

　<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
  })