vue.js路由的基本使用方式

vue.js路由的基本使用

Vue.js 路由（Vue Router）是 Vue.js 官方提供的一个插件，用于实现单页应用（SPA）的路由功能。

它可以帮助我们在 Vue.js 应用中实现页面的切换和导航，以及通过 URL 来控制页面的展示。

在 Vue.js 应用中使用路由，需要先安装 Vue Router。

可以通过npm或者yarn来安装

npm install vue-router
# 或者
yarn add vue-router

安装完成后

在入口文件（一般是 main.js）中引入并使用 Vue Router：

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

Vue.use(VueRouter)

然后，定义路由组件，即每个页面对应的组件。

可以在单个文件中定义一个组件，也可以使用 Vue 单文件组件。

例如：

<template>
  <h1>About</h1>
</template>

<script>
export default {
  name: 'About'
}
</script>

接下来：

创建一个路由实例，配置路由规则

const routes = [
  { path: '/', component: Home }, // 根路径对应 Home 组件
  { path: '/about', component: About } // /about 路径对应 About 组件
]

const router = new VueRouter({
  routes
})

最后：

在 Vue 根实例中使用路由实例

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

至此，路由已经配置完成。

可以在 Vue 组件中使用 <router-link> 和 <router-view> 标签来实现页面切换和展示。

<router-link> 是一个用于导航的链接组件，默认渲染成一个 <a> 标签。

可以通过 to 属性指定链接的地址，也可以通过 tag 属性指定渲染成其他标签。

示例：

<router-link to="/">Home</router-link>
<router-link to="/about" tag="button">About</router-link>

<router-view> 是一个用于渲染匹配路由组件的占位符组件。

它会根据当前路径匹配对应的组件，并将其渲染在当前位置。

示例：

<router-view></router-view>

除了基础的路由规则，Vue Router 还提供了其他的一些高级功能，如动态路由、嵌套路由、路由守卫等。

可以参考 Vue Router 的官方文档来了解更多详细内容。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。