vue 路由引入使用r

Vue路由是Vue.js官方提供的一个路由管理插件，用于管理应用程序的路由。以下是如何引入和使用Vue路由的步骤：

1. 安装Vue路由

使用npm安装Vue路由：

npm install vue-router --save

2. 引入Vue路由

在main.js中引入Vue路由：

import VueRouter from 'vue-router'
Vue.use(VueRouter)

3. 创建路由实例

创建一个路由实例，并定义路由规则：

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

4. 将路由实例挂载到Vue实例中

在Vue实例中将路由实例挂载到$router属性上：

new Vue({
  router
}).$mount('#app')

5. 使用路由

在Vue组件中使用路由：

<template>
  <div>
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

在上面的代码中，<router-link>标签用于生成链接，<router-view>标签用于显示匹配到的组件。路由的路径和组件的映射关系在创建路由实例时定义。