Getting started as a rookie, the configuration of vue-router has not been displayed.

First of all, I checked whether it was a vue-router reference problem. After excluding the reference problem, I found a lot of methods by surfing the Internet.

It is said that the name and the like have been ruled out. The following are the problem points that have been ruled out:

The route jumps but the interface does not display

Without adding router-view to the parent route, just add the following code.

1 2	`<!-- 路由匹配到的组件将显示在这里 -->` `<router-view></router-view>`

The return of new Vue Router in router.js must be: routes

// 指定为routes

const router = new VueRouter({
    routes
});

Enter the URL with #:

http://localhost:8080/#

Wait, I've tried everything, but it still doesn't show up.

The source code of the project is as follows:

/components/PageTest1.vue

<template>
  <div>
    <h1>page1</h1>
    <p>{
   
   {msg}}</p>
  </div>
</template>
<script>

export default {
  data () {
    return {
      msg: "我是page1组件"
    }
  }
}
</script>
<style scoped>

</style>

/components/PageTest2.vue

<template>
  <div>
    <h1>page2</h1>
    <p>{
   
   {msg}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: "我是page2组件"
    }
  }
}
</script>

<style scoped>

</style>

router.js

Put it in the same directory as main.js, src/

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter)
import page1 from './components/PageTest1.vue';
import page2 from './components/PageTest2.vue';

const routes = [
    {path: '/page1', component: page1},
    {path: "/page2", component: page2},
    //可以配置重定向
    // {path: '', redirect: "page1"}
    //或者重新写个路径为空的路由
    {path:"",component:page1}
]

const router = new VueRouter({
    routes
});

export default router

main.js


import Vue from 'vue'
import App from './App'
//引用router.js
import router from './router.js'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
//一定要注入到vue的实例对象上
  router,
  components: { App },
  template: '<App/>'
})

analyze:

The problem with my project is that the versions are incompatible and the environment configuration is incorrect. With webstorm, some versions that are only suitable for vue3 will be installed by default. Then the rookie learns and uses the code of vue2.

solution:

An error will be reported when the project is running, and an error will be displayed on the webpage by pressing F12:

“export ‘default‘ (imported as ‘VueRouter‘) was not found in ‘vue-router‘`

Finally, it was found to be a problem with the version of vue-router. The latest version is 4.xx. When using cnpm install vue-router -S, the latest version is installed by default.

Then fall back to 3.1.3: Execute the specified version installation:

cnpm i install  [email protected] -S

After installation, the first "vue-router": "^4.1.6" in package.json will become 3.5.2, and then delete the second one.

"vue-router": "^3.5.2"

Test it later, it can run

After switching the version and running again, you may encounter the following error 2:

"export 'default' (imported as 'VueRouter') was not found in 'vue-router' error analysis

问题：
vue配置vue-router ,项目启动时报错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.

Cause analysis:
During project configuration, the default npm package exports the runtime build, that is, the runtime version, which does not support compiling template templates.

When Vue initializes the project configuration, there are two versions of the operating environment configuration: Compiler version and Runtime version.

Solution:
In the root directory of the project, find: vue.config.js configuration file, add: runtimeCompiler: true,

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  runtimeCompiler: true,
})

Vue2 vue-router does not display the page problem