Vue フロントエンドの基本的なルーティングのカプセル化 (前後のルーティング ガードなし)

// route文件
import Vue from 'vue'
// 导入路由
import VueRouter from 'vue-router'

// 使用路由
Vue.use(VueRouter)

// 定义前端路由表
const routes = [
  {
    
    
  // 配置path-浏览器访问的地址
  // name 路由跳转时可用
  // component 引入的对应组件
    path: '/',
    name: 'home',
    component:  () => import('../views/Home.vue')
  },
  {
    
    
    path: '/about',
    name: 'about',
    component: () => import('../views/About.vue')
  }
]

// 将路由表注册到路由中
const router = new VueRouter({
    
    
  routes
})

// 导出 在main.js中导入使用
export default router

// main.js中引入使用
import router from './router'

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