Vue 开发技巧（十三）

使用路由：路由可以管理应用的页面跳转，并且支持多种导航模式

//main.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

new Vue({
  router,
  template: `
    <div id="app">
      <h1>My App</h1>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-view />
    </div>
  `
}).$mount('#app')

使用了 Vue Router 进行路由管理。创建了两个组件 Home 和 About，并将它们与路径映射到路由表中。最后，使用 在模板中渲染对应的组件。