咨询手机网站建设平台百度热度榜搜索趋势

注意：对于代码看不清的部分，用鼠标选中就能看到了，背景颜色和字体颜色过于接近，我也不知道怎么调，只能这样子先看着了

一、Vue Router 是什么？

Vue Router 是 Vue.js 官方的路由管理器，它允许你在单页面应用中通过不同的 URL 显示不同的组件。Vue Router 与 Vue.js 核心深度集成，提供了声明式的路由定义、嵌套路由、动态路由、导航守卫等功能，帮助开发者构建复杂的单页面应用。

二、安装与配置

1. 安装 Vue Router

在 Vue 2 项目中，可以通过 npm 或 yarn 安装 Vue Router：注意，vue2要安装3点几的版本

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

2. 创建路由实例

在项目中创建一个 router.js 文件，用于配置路由：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';// 使用 Vue Router
Vue.use(VueRouter);// 定义路由规则
const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
];// 创建路由实例
const router = new VueRouter({mode: 'history', // 使用 HTML5 历史模式routes
});export default router;

3. 在主文件中引入路由

在 main.js 中引入路由实例，并将其挂载到 Vue 实例上：

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

三、基本用法

1. 使用 <router-link> 和 <router-view>

在 Vue 模板中，使用 <router-link> 创建导航链接，使用 <router-view> 显示当前路由对应的组件。

<template><div><h1>Vue Router 示例</h1><nav><router-link to="/">首页</router-link><router-link to="/about">关于</router-link></nav><router-view></router-view></div>
</template>

2. 动态路由

动态路由允许你在 URL 中传递参数。例如：

const routes = [{path: '/user/:id',name: 'User',component: User}
];

在组件中，可以通过 $route.params 获取参数：

<template><div><h2>用户详情</h2><p>用户 ID：{{ $route.params.id }}</p></div>
</template>

3. 嵌套路由

嵌套路由允许你在某个组件内部定义子路由。例如：

const routes = [{path: '/parent',component: Parent,children: [{path: 'child',component: Child}]}
];

在模板中，使用 <router-view> 显示子路由：

<template><div><h2>父组件</h2><router-view></router-view></div>
</template>

四、高级用法

1. 导航守卫

Vue Router 提供了导航守卫（Navigation Guards），可以在路由跳转前后执行一些逻辑。例如：

router.beforeEach((to, from, next) => {if (to.path === '/login') {next();} else {if (!isAuthenticated) {next('/login');} else {next();}}
});

2. 命名路由

为路由命名后，可以通过名称进行跳转：

const routes = [{path: '/about',name: 'About',component: About}
];

在模板中使用 <router-link>：

<router-link :to="{ name: 'About' }">关于</router-link>

3. 编程式导航

除了 <router-link>，还可以通过编程方式导航：

this.$router.push({ name: 'About' });

4. 路由懒加载

为了优化应用性能，可以使用路由懒加载：

const routes = [{path: '/about',name: 'About',component: () => import('../components/About.vue')}
];