咨询手机网站建设平台网络媒体软文案例
注意：对于代码看不清的部分，用鼠标选中就能看到了，背景颜色和字体颜色过于接近，我也不知道怎么调，只能这样子先看着了
一、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')}
];