vue项目加入vue-router

最新推荐文章于 2024-09-13 11:36:32 发布

小马大咖

最新推荐文章于 2024-09-13 11:36:32 发布

阅读量317

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_67063430/article/details/127707775

版权

1.下载依赖

npm install vue-router --save

2.在src/router/index.js 如果没有文件夹可以自己创建

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../components/HelloWorld.vue' //这是你的首页组件
Vue.use(VueRouter)
const routes =  [
    {
        path:'/',
        redirect:'',
        component:Index
    }
]
const router = new VueRouter({
  mode:'history',  
  routes
})
export default router

3.在main.js引入你的router配置文件

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

Vue.config.productionTip = false

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

4.把app.vue的文件改写,这样会默认进入到你定义的第一个文件里面

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

<script>

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