vue项目如何配置路由，设置项目启动的首页

 

 

首先要下载vue-router（若直接npm install vue-router --save，版本不匹配可能会报错）：

使用vue2安装对应的router3版本

npm install vue-router@3 --save

使用vue3安装对应的router4版本 

npm install vue-router@4 --save

---

 

1.创建src/router/index.js

import Vue from "vue"
import VueRouter from 'vue-router'
import Home from '../views/home.vue' 

Vue.use(VueRouter)

export default new VueRouter({
    routes:[
        {
            path:'/home',
            component:Home　
        },
        {
            path:'/',
            redirect:'/home'　　//默认显示
        }
    ]
})

 

2.APP.vue

<template>
  <div id="app">
      <router-view></router-view>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

 

3.main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

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

 

4.src/components里随便建一个vue文件，我这里是项目初始化的helleworld，所以无需手动创建

 

 

 

5.创建需要展示的首页，src/views/home.vue

 

 

 

6.npm run dev 一下，成功