vue篇3 路由配置

路由配置

思路与实例化：

main.js→router.js→具体的页面→具体的页面加载组件。如上，下，左，右的组件

一、大体框架

vue create vueinshop 

 二、

报错问题一：

Uncaught TypeError: Cannot read properties of undefined (reading 'install')
    at Vue.use (vue.runtime.esm.js?2b0e:5784:1)
    at eval (router.js?41cb:7:1)
    at ./src/router.js (app.js:1188:1)
    at __webpack_require__ (app.js:849:30)
    at fn (app.js:151:20)
    at eval (main.js?56d7:1:1)
    at ./src/main.js (app.js:1140:1)
    at __webpack_require__ (app.js:849:30)
    at fn (app.js:151:20)
    at 1 (app.js:1201:18)

解决方案：

 cnpm install vue-router@3.1.3 --save-dev

参考文章：解决- “export ‘default‘ (imported as ‘VueRouter‘) was not found in ‘vue-router‘_Vincent^_^的博客-CSDN博客 

报错问题二：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

main.js里面内容修改为

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

修改为

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

参考文章：vue报[Vue warn]: You are using the runtime-only..........错误_昆仑洞洞主的博客-CSDN博客