【Vue】VueRouter_vue vuerouter-优快云博客

本文链接：https://blog.youkuaiyun.com/webFrontEndDev/article/details/103205275

本文详细介绍如何在Vue项目中配置和使用vue-router，包括安装vue-router、创建路由配置文件、定义路由规则、在main.js中引入并挂载路由，以及如何在页面中实现路由跳转。

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

首先在项目里安装vue-router

npm i vue-router

创建一个router.js 配置用来router

touch src/router.js

// router.js

import Vue from 'vue'  //引入 vue
import VueRouter from 'vue-router' // 引入vue-router
import pageA from './src/pages/a'  // 引用要配置路由的页面a
import pageB from './src/pages/b'  // 引用要配置路由的页面b

Vue.use(VueRouter)  //使用Vue.use 挂载 vue-router

const routes = [{  // 配置路由页
    path: '/',
    component: pageA
  },
  {
    path: '/pageb',
    component: pageB
  }
]

const router = new VueRouter({ // 实例化 router 配置
  routes
})
export default router

// main.js

import Vue from 'vue'
import router from '../router'  // 引入router配置

Vue.config.productionTip = false

new Vue({ // 把路由的实例挂载在 vue 实例 #app 上
  router
}).$mount('#app')

<div id="app">
    <!-- 在vue 实例挂载的dom上添加 router-view 节点 -->
   <router-view></router-view> 
</div>

路由切换：

 <div id="app">
    <router-view></router-view>
    <!-- 跳转页面 to的属性值对应 router.js 里的path -->
    <router-link to="/">Go to pagea</router-link>
    <router-link to="/pageb">Go to pageb</router-link>
  </div>