路由配置主要有两种方法
1.路由直接在main.js中配置
main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.config.productionTip = false
const router = new VueRouter({
mode:"history",
routes:routes
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
router.js
//路由可以直接引入也可以先引入,然后用引入的名称代替
//第一种
import HelloWorld from '../../components/HelloWorld.vue'
import Home from '../../components/vpage/Home.vue'
const routes = [
{ path:'/HelloWorld',name:'HelloWorld',component:HelloWorld },
{ path:'/home',name:'Home',component:Home }
]
export default routes
//第二种
import Home from ''
const routes = [
{
path: '/HelloWorld',
name: 'HelloWorld',
component: () => import('../../components/HelloWorld.vue')
},
{
path: '/home',
name: 'Home',
component: () => import('../../components/vpage/Home.vue')
}
]
export default routes
2.路由在router.js中配置 文件名不一定是router.js,只要是配置路由的文件就行
main.js
import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/index/Home.vue'
Vue.use(VueRouter)
const routes =[
{
path: '/HelloWorld',
name: 'HelloWorld',
component: () => import('../../components/HelloWorld.vue')
},
{
path: '/home',
name: 'Home',
component: () => import('../../components/vpage/Home.vue')
}
]
const router = new VueRouter({
routes
})
export default router
3.引用组件跳转时别忘了<router-view ></router-view>
这个一定要有,他是跳转的地方展示内容的,如果没有就不不知道跳转的页面内容放在那了
如果以上配置都没有问题,那么需要查看一下package.json文件,查看router相关插件本版好是否对应。小编就是版本号不对应,vue是本版2,vue-router 是版本4 vuex是本版4,导致页面配置的路由内容不显示,就这么一个问题搞了三天