Vue Router是Vue.js官方提供的路由管理器,用于构建单页面应用(SPA)中的客户端路由功能。它通过将不同的URL映射到不同的Vue组件,实现了页面之间的切换和导航。下面将详细介绍Vue Router的功能,并给出一个简单的示例。
功能介绍
- 路由映射:
 Vue Router允许你定义路由映射规则,将URL路径映射到Vue组件。这样,当URL改变时,可以加载并渲染对应的组件,从而实现页面之间的切换。
- 嵌套路由:
 嵌套路由允许你在父路由下定义子路由。这有助于创建复杂的页面布局和嵌套组件结构,同时保持路由的层次性和可读性。
- 路由参数:
 你可以在路由规则中定义参数,以捕获URL中的动态片段。这些参数可以作为路由组件的属性,用于动态地渲染组件内容。例如,你可以定义一个带有商品ID参数的路由,以显示特定商品的详细信息。
- 导航守卫:
 导航守卫允许你在路由跳转前后执行一些逻辑,如身份验证、权限检查或其他预处理逻辑。这有助于控制用户是否可以访问或离开某个页面。
示例
下面是一个简单的Vue Router示例,演示了如何设置和使用路由。
首先,安装Vue Router:
npm install vue-router 
         然后,在你的Vue项目中创建一个router.js文件,并定义路由映射:
import Vue from 'vue'; import Router from 'vue-router'; import HomeComponent from './components/HomeComponent.vue'; import AboutComponent from './components/AboutComponent.vue'; Vue.use(Router); export default new Router({ routes: [ { path: '/', name: 'home', component: HomeComponent }, { path: '/about', name: 'about', component: AboutComponent } ] });
在上面的代码中,我们定义了两个路由规则:一个指向HomeComponent,另一个指向AboutComponent。
接下来,在你的Vue应用入口文件(如main.js)中引入并使用这个路由实例:
import Vue from 'vue'; import App from './App.vue'; import router from './router'; new Vue({ router, render: h => h(App) }).$mount('#app');
最后,在App.vue中,你可以使用<router-link>和<router-view>来创建导航链接和渲染组件:
<template> <div id="app"> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-view></router-view> </div> </template>
在这个示例中,<router-link>用于创建导航链接,to属性指定了链接的目标路径。<router-view>则是一个占位符,用于渲染当前路由对应的组件。
当用户点击“Home”或“About”链接时,URL会改变,并且<router-view>中的内容也会相应地更新为对应组件的渲染结果。
