揭秘 Vue-Router 中路由配置的奥秘，一步步搞定！

2023-10-16 19:44:37

Vue-Router 路由配置指南

1. 安装 Vue-Router

首先，你需要安装 Vue-Router。在你的项目中，打开终端并输入以下命令：

npm install vue-router

2. 引入 Vue-Router

在你的项目的 src/router/index.js 文件中，引入 Vue-Router：

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

Vue.use(VueRouter)

3. 创建 Vue-Router 实例

在 src/router/index.js 文件中，创建一个 Vue-Router 实例：

const router = new VueRouter({
  routes: []
})

4. 配置路由

现在，你可以开始配置路由了。在 routes 数组中，你可以定义每个路由的路径、组件和名称：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      name: 'home'
    },
    {
      path: '/about',
      component: About,
      name: 'about'
    }
  ]
})

5. 引入路由对应的组件

在你的组件中，你需要引入对应的组件。例如，在 Home.vue 文件中，你可以引入 Home 组件：

<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

<script>
import Home from './Home.vue'

export default Home
</script>

6. 在 `main.js` 中注册路由

最后，你需要在 src/main.js 文件中注册路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import router from './router'

Vue.use(VueRouter)

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