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 一下,成功