vue 使用 vue-router

最新推荐文章于 2025-05-21 12:38:26 发布

wangooo

最新推荐文章于 2025-05-21 12:38:26 发布

阅读量138

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue router

本文链接：https://blog.youkuaiyun.com/wangooo/article/details/120055433

vue 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了如何在Vue.js项目中安装和配置Vue Router，包括在main.js中引入并注册路由器，以及在App.vue中添加<router-view>以实现页面路由。通过Vue.use(VueRouter)启用路由功能，并在router/index.js中定义路由配置，如设置PageOne和PageTwo的路径及对应的组件。

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

安装

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

新建 router/index.js 文件，路由就是在这里配置的。

// 引入 vue 和 vue-router 组件
import Vue from 'vue';
import VueRouter from 'vue-router';

// 
Vue.use(VueRouter);


import PageOne from '../components/PageOne.vue';
import PageTwo from '../components/PageTwo.vue';

// 路由配置，放在router实例中
const router = new VueRouter({
    routes: [
    {
        path: '/PageOnePath',
        component: PageOne
    },
    {
        path: '/PageTwoPath',
        component: PageTwo
    }
    ]
});


export default router;

在 main.js 中引入router的配置文件，并注册 router 到 vue实例中

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


// 1.引入刚刚配置的路由（router/index.js）
import router from './router';


Vue.config.productionTip = false


// 注册 router 到vue实例中，App为根组件，App组件内部会有路由功能
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

将 <router-view/> 即可路由组件要显示的地方。

一般 App.vue 就是应用的首页，添加 <router-view/> 到App.vue。

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