前端路由
1. 前端路由的概念
前端路由依靠hash值得变化进行实现,后端路由就是一个功能对应一个js文件;
前端路由得概念: 根据不同得事件来显示不同得页面内容,就是事件与事件处理函数之间得对应关系,前端路由主要做的事情就是监听事件并分发执行事件处理函数;
后端路由: URL请求地址与服务器资源的对应;
2. 前端路由的使用
- 手动模拟路由,通过监听
hash
值得改变来实现;
HTML代码:
<div id="app">
<a href="#/zhuye">主页</a>
<a href="#/keji">科技</a>
<a href="#/caijing">财经</a>
<a href="#/yule">娱乐</a>
<component :is="comName"></component>
</div>
监听hash
值的改变
window.onhashchange = function() {
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;
default:
vm.comName = 'zhuye';
break;
}
}
对应的组件:
3. Vue Route路由的使用
- 先是引入相关文件:
<script src="./lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>
- 写路由链接,其中
<router-view></router-view>
是路由位置
<div id="app">
<router-link to="/user">User</router-link>
<router-link to="/register">register</router-link>
<router-view></router-view>
</div>
3.定义路由组件:
- 创建路由对象,并创建规则:
- 最后将路由挂载到实例上面
4. 路由嵌套
在Login的模板字符串中写入子路由
然后在Login路由下面创建子路由
5. 路由动态参数配置
props
:后面也可以是对象形式,或者写true
只传id
,User里面的props接收这里传过去的数据;
还可以给路由命名如name:'user'