Vue 2 路由指南从基础到高级用法举例
作者：鸡吃丸子
上篇文章给大家介绍了关于Vue3路由push跳转问题(解决Vue2this.$router.push失效） Vue2路由router的安装和使用完整实例 喜欢的朋友直接阅读。
注意：对于代码看不清的部分，用鼠标选中就能看到了，背景颜色和字体颜色过于接近，我也不知道怎么调，只能这样子先看着了
一、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')
}
];到此这篇关于Vue 2 路由指南：从基础到高级的文章就介绍到这了,更多相关Vue 2 路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！