vue3 引入routerlink

在 Vue3 中，可以使用 `router-link` 组件来实现路由跳转。不过需要注意的是，在 Vue3 中，`router-link` 组件已经被重命名为 `RouterLink`。

使用 `RouterLink` 组件的方式与 Vue2 中的 `router-link` 组件基本相同，只是需要将组件名改为 `RouterLink`，同时也需要在组件中使用 `to` 属性来指定跳转的目标路由。

以下是一个简单的示例：

<template>
  <RouterLink to="/about">About</RouterLink>
</template>

<script>
import { RouterLink } from 'vue-router'

export default {
  components: {
    RouterLink
  }
}
</script>

相关问题

vue routerlink不显示

你可能遇到了一些常见的问题导致 Vue 的 `router-link` 不显示。以下是一些常见的解决方法：

1. 确认是否正确引入了 Vue Router 并创建了路由实例。

在你的主文件（通常是 `main.js`）中，确保已引入 Vue Router，并且创建了一个路由实例。例如：

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

   Vue.use(VueRouter)

   const router = new VueRouter({
     routes: [
       // 定义你的路由
     ]
   })

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

2. 检查路由配置是否正确。

在你的路由配置文件中（通常是 `router/index.js`），确保已正确配置了路由。例如：

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

   Vue.use(VueRouter)

   const routes = [
     {
       path: '/',
       name: 'Home',
       component: Home
     },
     // 其他路由配置
   ]

   const router = new VueRouter({
     mode: 'history',
     base: process.env.BASE_URL,
     routes
   })

   export default router

3. 确认是否正确使用了 `router-link` 组件。

在你的模板中，使用 `<router-link>` 标签来创建链接。例如：

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

4. 检查路由路径是否正确。

确保你的路由路径与 `router-link` 的 `to` 属性匹配。如果你的路由配置中定义了参数，也需要正确传递参数。例如：

   <router-link :to="{ path: '/user/' + userId }">User</router-link>

如果以上解决方法都没有帮助，可以提供更多的代码和错误信息，以便更好地帮助你解决问题。

vue3 router

Vue 3使用的是Vue Router 4，相较于Vue Router 3有一些变化。

1. 创建Router实例的方式有所不同：

Vue Router 3：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({...})

Vue Router 4：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [...]
})

export default router

2. 在组件中使用路由需要使用`<router-link>`和`<router-view>`组件。在VueRouter 4中，这些组件需要从`vue-router`中导入：

import { RouterLink, RouterView } from 'vue-router'

export default {
  components: {
    RouterLink,
    RouterView
  }
}

3. Vue Router 4引入了新的API：`useRoute`和`useRouter`。`useRoute`返回当前路由信息，`useRouter`返回当前路由实例。可以在任何组件中使用这些API，不需要通过props传递路由信息。

import { useRoute, useRouter } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const router = useRouter()

    // ...
  }
}

这些是Vue Router 4的一些变化，更多细节可以查看Vue Router的官方文档。