vue-cli中使用vue-router

最新推荐文章于 2025-03-21 16:06:29 发布

原创最新推荐文章于 2025-03-21 16:06:29 发布 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-router

vue 同时被 2 个专栏收录

4 篇文章

订阅专栏

JavaScript

1 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中安装并配置Vue Router，包括使用Yarn或npm安装Vue Router，配置路由管理，以及在组件中使用路由链接和视图。通过实际案例，帮助读者快速上手Vue路由管理。

首先在工程内打开cmd使用yarn或npm安装vue-router

安装后，打开文件根目录下package.json看到vue-router:版本号则安装成功

根目录新建一个router.js，对路由进行管理配置

// router.js

import Vue from 'vue'
import Router from 'vue-router' // 引入vue-router
import Page2 from './pages/page2' // 引入组件方式2

Vue.use(Router) //使用vue-router

export default new Router({
    routes:[
        {
            path:"/page1",
            name:"page1",
            component:()=>import('./pages/page1') // 引入组件方式1
        },
        {
            path:'/page2',
            name:'page2',
            component:Page2 // 引入组件方式2
        },
    ]
})

在main.js中引入router.js

// main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router.js' // router中的r要小写，不然会冲突

Vue.config.productionTip = false

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

在组件中使用：

// component.vue

<template>
    <div>
        <div>
          <router-link to="/page1">page1</router-link> // path路径
          <router-link to="/page2">page2</router-link> // path路径
        </div>
        <router-view></router-view> // page1，page2组件在router-view内显示
    </div>
</template>

<script>
export default {
 
};
</script>
    
<style lang="scss" scoped>
</style>