Vue之vue-router简单使用_vue-router 指向一个vue文件-优快云博客

本文链接：https://blog.youkuaiyun.com/S2763427717/article/details/125988081

本文介绍了如何在Vue项目中使用vue-router进行页面路由管理，包括安装、配置和创建基本路由，以及在组件间跳转和链接的实现。从新建文件夹到编写并导出路由，一步步实现实现Home和User页面的切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载依赖

npm install vue-router

在根目录下的src文件夹下新建文件夹views
在views文件夹下新建Home.vue文件、User.vue文件

//Home.vue文件夹代码如下
<template>
    <div>Home页面</div>
</template>
<script>
export default {
    name:'Home',
    data(){
        return{}
    }
}
</script>

//User.vue文件夹代码如下
<template>
    <div>User页面</div>
</template>
<script>
export default {
    name:'User',
    data(){
        return{}
    }
}
</script>

在根目录下的src文件夹下新建文件夹router
在router文件夹下新建index.js文件，index.js文件夹代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router';
Vue.use(VueRouter)

const routes = [
    {
        path:'/',
        name:'Home',
        //按需引入
        component:()=>import('../views/Home.vue')
    },
    {
        path:'/user',
        name:'User',
        component:()=>import('../views/User.vue')
    }
]

const router = new VueRouter({
    // 路由匹配模式
    mode:'history',
    routes
})

export default router

在main.js文件夹下

import router from './router'

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

在根目录下的components文件夹下更新文件HelloWorld.vue

<template>
  <div class="hello">
    <router-link to="/">
        <el-button type="warning">进入HOME页面</el-button>
    </router-link>
    <router-link to="/user">
        <el-button type="success">进入USER页面</el-button>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{}
  }
}
</script>

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

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

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