vue router跳转

在Vue中，Vue Router是用于处理路由的官方库。通过Vue Router，你可以轻松地在不同的组件或页面之间进行跳转。下面是一个简单的示例来展示如何使用Vue Router进行跳转：

首先，确保你已经安装了Vue Router。你可以使用npm或yarn来安装它：

```bash

npm install vue-router

```

或者

```bash

yarn add vue-router

```

接下来，你可以在你的Vue项目中创建一个router实例并进行配置。这里是一个简单的示例：

```javascript

// 导入Vue和Vue Router

import Vue from 'vue';

import VueRouter from 'vue-router';

// 导入要跳转的组件

import Home from './components/Home.vue';

import About from './components/About.vue';

import Contact from './components/Contact.vue';

Vue.use(VueRouter); // 使用Vue Router插件

const router = new VueRouter({ // 创建router实例并进行配置

mode: 'history', // 使用history模式，这样URL中不会出现#号

routes: [ // 定义路由规则

{ path: '/', component: Home }, // 首页路由规则，路径为'/'，对应Home组件

{ path: '/about', component: About }, // 关于页面路由规则，路径为'/about'，对应About组件

{ path: '/contact', component: Contact } // 联系页面路由规则，路径为'/contact'，对应Contact组件

]

});

```

接下来，在你的Vue应用程序的主入口文件（通常是`main.js`）中，将router实例添加到Vue实例中：

```javascript

import Vue from 'vue';

import App from './App.vue'; // 导入根组件

import router from './router'; // 导入router实例

new Vue({

router, // 添加router实例到Vue实例中

render: h => h(App) // 使用根组件渲染应用程序

}).$mount('#app'); // 将Vue应用程序挂载到指定的DOM元素上（这里假设是id为app的元素）

```

现在你可以在组件中使用`<router-link>`和`<router-view>`来创建导航链接和渲染对应的组件了。例如：

在组件中使用`<router-link>`创建导航链接：

```html

<template>

<div>

<router-link to="/">首页</router-link> | <!-- 通过to属性指定目标路径 --> <!-- “首页”是一个链接文字 --> <!-- 用户点击时会自动跳转到对应的路由 --> 对应的组件会被渲染到<router-view>的位置。 --> <!-- 可以使用tag属性自定义渲染的HTML标签，例如<router-link tag="li"> --> <!-- 可以使用active-class属性指定激活时的CSS类名 --> <!-- 可以使用exact属性指定仅在精确匹配时应用激活样式 --> <!-- 可以使用自定义事件进行处理，例如点击事件 --> <!-- 可以使用事件修饰符，例如使用.stop阻止事件冒泡 --> <!-- 可以使用动态路由匹配，通过在路径中使用冒号（:）来指定动态参数 --> <!-- 在组件中使用<router-view>来渲染匹配的组件 --> 等等更多功能可以在文档中找到更多详细信息。 --> 访问关于页面：<router-link to="/about">关于</router-link> | 访问联系页面：<router-link to="/contact">联系</router-link> <router-view></router-view> <!-- 当路由匹配到对应的组件时，组件内容将被渲染到这个位置 --> </div> </template> <script> export default { /组件逻辑 */ } </script> ``` 现在你的应用程序已经可以使用Vue Router进行路由跳转了。当用户点击`<router-link>`时，页面会自动跳转到对应的路由路径，并且匹配的组件会被渲染到`<router-view>`的位置。你可以在文档中查找更多关于Vue Router的详细信息和功能。