vue-router的导入和使用

关于如何在 Vue.js 中导入和使用 vue-router 的基本例子。

首先，确保你已经安装了 vue-router。你可以通过 npm 或 yarn 来安装：

npm install vue-router

# 或者

yarn add vue-router

然后，在你的 Vue 项目中，你可以按照以下步骤来使用 vue-router：

导入 Vue 和 vue-router

在你的主文件（通常是 main.js 或 main.ts）中，你需要导入 Vue 和 vue-router。

javascript

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

定义路由

接着，你需要定义你的路由。每个路由应该映射到一个组件。以下是一个简单的例子：

 

javascript

import HomeComponent from './components/HomeComponent.vue'

import AboutComponent from './components/AboutComponent.vue'

const routes = [

  { path: '/', component: HomeComponent },

  { path: '/about', component: AboutComponent }

]

 

创建 router 实例并将其传递给 Vue 实例

然后，你可以使用 routes 配置来创建一个 router 实例，并将其传递给 Vue 的根实例。

javascript

const router = new VueRouter({

  routes // (缩写) 相当于 routes: routes

})

 

new Vue({

  router,

  render: h => h(App)

}).$mount('#app')

 

在组件中使用 <router-link> 和 <router-view>

在你的 Vue 组件中，你可以使用 <router-link> 来创建链接，当用户点击这些链接时，视图会自动更新为对应路由所映射的组件。<router-view> 则用于渲染当前路由对应的组件。

例如，在 App.vue 中：

vue

<template>

  <div id="app">

    <nav>

      <router-link to="/">Home</router-link> |

      <router-link to="/about">About</router-link>

    </nav>

    <router-view/>

  </div>

</template>

现在，当你点击 "Home" 或 "About" 链接时，<router-view> 的内容会自动更新为对应的组件。