Vue2使用vue-router初始化项目

最新推荐文章于 2024-03-20 20:31:57 发布

Hrational

最新推荐文章于 2024-03-20 20:31:57 发布

阅读量242

点赞数

文章标签： vue.js 前端 vue-router

本文链接：https://blog.csdn.net/sdkl_yi/article/details/133018188

版权

Vue2使用vue-router初始化项目

**项目版本号**
vue@2.6.14
vue-router@3.6.5

在components中创建Main.vue文件，输入页面要显示的内容：

<template>
    <h1>这是 Main 组件</h1>
</template>

<script>
export default {
    name: 'thisMain'
}
</script>

<style scoped>

</style>

安装vue-router：npm install vue-router@3.6.5，根据你自己vue版本号安装对应的router，查看当前项目vue版本命令 npm list vue
在项目src文件夹下，创建router文件夹以及index.js文件，写入一下内容：

import Vue from 'vue'
import Router from 'vue-router'
import thisMain from '@/components/Main'

Vue.use(Router)

export const routerMap = [
    {
        path: '/main',
        component: thisMain,
        children: [
        ]
    }
]

const router = new Router({
    routes: routerMap
})

export default router

App.vue里面使用router-view

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

<script>

export default {
  name: 'App',
}
</script>

main.js的app里面加入router:

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')