①. 前端路由简介
1>.前端路由简介
- ①. 概念：根据不同的用户事件，显示不同的页面内容
- ②. 本质：用户事件与事件处理函数之间的对应关系
③. 基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）
④. 代码展示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <!-- 导入 vue 文件 --> <script src="./lib/vue_2.5.22.js"></script> </head> <body> <!-- 被 vue 实例控制的 div 区域 --> <div id="app"> <!-- 切换组件的超链接 --> <a href="#/zhuye">主页</a> <a href="#/keji">科技</a> <a href="#/caijing">财经</a> <a href="#/yule">娱乐</a> <!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 --> <!-- 可以把 component 标签当做是【组件的占位符】 --> <component :is="comName"></component> </div> <script> // #region 定义需要被切换的 4 个组件 // 主页组件 const zhuye = { template: '<h1>主页信息</h1>' } // 科技组件 const keji = { template: '<h1>科技信息</h1>' } // 财经组件 const caijing = { template: '<h1>财经信息</h1>' } // 娱乐组件 const yule = { template: '<h1>娱乐信息</h1>' } // #endregion // #region vue 实例对象 const vm = new Vue({ el: '#app', data: { comName: 'zhuye' }, // 注册私有组件 components: { zhuye, keji, caijing, yule } }); // #endregion // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称 window.onhashchange = function() { // 通过 location.hash 获取到最新的 hash 值 console.log(location.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>
②. vue-router的基本使用
2>.vue-router的基本使用
- ①. 引入相关的库文件
②. 添加路由链接
③. 添加路由填充位
④. 定义路由组件
⑤. 配置路由规则并创建路由实例
⑥. 把路由挂载到 Vue 根实例中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 一定要先引入vue.js再引入vue-router.js 顺序不能 --> <script src="./lib/vue_2.5.22.js"></script> <script src="./lib/vue-router_3.0.2.js"></script> </head> <body> <div id="app"> <!-- route-link是vue中提供的标签,默认会被渲染为a标签 to属性默认会被渲染为href属性 to属性的值默认会被渲染为#开头的hash地址 <a href="#/user" class="router-link-exact-active router-link-active">User</a> --> <router-link to="/user">User</router-link> <router-link to="/register">Register</router-link> <!-- 路由填充位(也叫做路由占位符) --> <router-view></router-view> </div> <script> const User = { data:function(){ return{ msg:'User 组件' } }, template: '<h1>{{msg}}</h1>' } const Register = { data:function(){ msg:'Register 组件' }, template: '<h1>{{msg}}</h1>' } const router=new VueRouter({ //routes是路由规则数组 routes:[ //每个路由规则都是一个配置对象,其中至少包含path和component两个属性: //path表示当前路由规则匹配的hash地址 //component表示当前路由规则对应要展示的组件(只接受组件,不接受字符串) {path:'/user',component:User}, {path:'/register',component:Register} ] }); const vm=new Vue({ el:'#app', data:{ }, //为了能够让路由规则生效,必须把路由对象挂载到Vue实例对象上 //es6中如果属性值和属性名一致那么可以简写 //router:router router }); </script> </body> </html>
