当前位置：首页 > 前端技术 > vue >内容正文

vue

027_vue路由

发布时间：2025/5/22 vue 78 豆豆

生活随笔收集整理的这篇文章主要介绍了 027_vue路由小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1. 后端路由

1.1. 概念: 根据不同的用户URL请求, 返回不同的内容。

1.2. 本质: URL请求地址与服务器资源之间的对应关系。

2. SPA(Single Page Application)

2.1. 后端渲染, 存在性能问题。

2.2. Ajax前端渲染, 提高前端渲染性能, 但是不支持浏览器的前进和后退操作。

2.3. SPA(Single Page Application)单页面应用程序: 整个网站只有一个页面, 内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退。

2.4. SPA实现原理之一: 基于URL地址的hash, hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求。

2.5. 在实现SPA过程中, 最核心的技术点就是前端路由。

3. 前端路由

3.1. 概念: 根据不同的用户事件, 显示不同的页面内容。

3.2. 本质: 用户事件与事件处理函数之间的对应关系。

4. 通过window的onhashchange事件实现简易前端路由

4.1. 基于URL中的hash实现, 点击菜单的时候改变URL的hash, 根据hash的变化控制组件的切换。

4.2. 代码

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>通过window的onhashchange事件实现简易前端路由</title></head><body><div id="app"><a href="#/zhuye">主页</a> <a href="#/keji">科技</a> <a href="#/caijing">财经</a><a href="#/yule">娱乐</a><component :is="comName"></component></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">// 定义需要被切换的4个组件// 主页组件const zhuye = {template: '<h1>主页信息</h1>'};// 科技组件const keji = {template: '<h1>科技信息</h1>'};// 财经组件const caijing = {template: '<h1>财经信息</h1>'};// 娱乐组件const yule = {template: '<h1>娱乐信息</h1>'};var vm = new Vue({el: "#app",data: {comName: 'zhuye'},components: {zhuye,keji,caijing,yule}});// 监听window的onhashchange事件, 根据获取到的最新的hash值, 切换要显示的组件的名称window.onhashchange = function() {// 通过location.hash获取到最新的hash值switch(location.hash.slice(1)){case '/zhuye':vm.comName = 'zhuye';break;case '/keji':vm.comName = 'keji';break;case '/caijing':vm.comName = 'caijing';break;case '/yule':vm.comName = 'yule';break;}}</script></body> </html>

4.3. 效果图

5. Vue Router

5.1. Vue Router是Vue官方路由管理器。它和Vue.js的核心深度集成, 可以非常方便的用于SPA应用程序的开发。

5.2. Vue Router包含的功能:

5.2.1. 支持html5历史模式或hash模式。

5.2.2. 支持嵌套路由。

5.2.3. 支持路由参数。

5.2.4. 支持编程式路由。

5.2.5. 支持命名路由。

6. Vue Router基本使用步骤

6.1. 引入相关的库文件。

<script type="text/javascript" src="vue.min.js"></script>  <script type="text/javascript" src="vue-router_3.0.2.js"></script>

6.2. 添加路由链接。

<router-link to="/zhuye">zhuye</router-link> <router-link to="/keji">keji</router-link>

6.3. 添加路由填充位。

<router-view></router-view>

6.4. 定义路由组件。

// 定义路由组件 var zhuye = {template: '<h1>主页信息</h1>' }; var keji = {template: '<h1>科技信息</h1>' };

6.5. 配置路由规则并创建路由实例。

// 创建路由实例对象 var router = new VueRouter({// 所有的路由规则routes: [// 每个路由规则都是一个匹配对象, 其中至少包含path和component两个属性。// path表示当前路由规则匹配的hash地址。// component表示当前路由规则对应要展示的组件。{ path: '/zhuye', component: zhuye },{ path: '/keji', component: keji }] });

6.6. 把路由挂载到Vue根实例中。

var vm = new Vue({el: "#app",// 挂载路由实例对象// router: routerrouter });

6.7. 路由重定向指的是: 用户在访问地址A的时候, 强制用户跳转到地址C, 从而展示特定的组件页面; 通过路由规则的redirect属性, 指定一个新的路由地址, 可以很方便地设置路由重定向。

// 创建路由实例对象 var router = new VueRouter({// 所有的路由规则routes: [// 每个路由规则都是一个匹配对象, 其中至少包含path和component两个属性。// path表示当前路由规则匹配的hash地址。// component表示当前路由规则对应要展示的组件。// 重定向path: '/'表示原地址, redirect表示将要被重定向到的新地址。{ path: '/', redirect: '/zhuye' },{ path: '/zhuye', component: zhuye },{ path: '/keji', component: keji }] });

6.8. 代码

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>vue-router的基本使用</title></head><body><div id="app"><router-link to="/zhuye">zhuye</router-link><router-link to="/keji">keji</router-link><router-view></router-view></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript" src="vue-router_3.0.2.js"></script><script type="text/javascript">// 定义路由组件var zhuye = {template: '<h1>主页信息</h1>'};var keji = {template: '<h1>科技信息</h1>'};// 创建路由实例对象var router = new VueRouter({// 所有的路由规则routes: [// 每个路由规则都是一个匹配对象, 其中至少包含path和component两个属性。// path表示当前路由规则匹配的hash地址。// component表示当前路由规则对应要展示的组件。// 重定向path: '/'表示原地址, redirect表示将要被重定向到的新地址。{ path: '/', redirect: '/zhuye' },{ path: '/zhuye', component: zhuye },{ path: '/keji', component: keji }]});var vm = new Vue({el: "#app",// 挂载路由实例对象// router: routerrouter});</script></body> </html>

6.9. 效果图

总结

以上是生活随笔为你收集整理的027_vue路由的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。

路由
_vue