前端路由

前端路由

1. 前端路由的概念

前端路由依靠hash值得变化进行实现，后端路由就是一个功能对应一个js文件；
前端路由得概念： 根据不同得事件来显示不同得页面内容，就是事件与事件处理函数之间得对应关系，前端路由主要做的事情就是监听事件并分发执行事件处理函数；

后端路由： URL请求地址与服务器资源的对应；

2. 前端路由的使用

1. 手动模拟路由，通过监听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路由的使用

1. 先是引入相关文件：

<script src="./lib/vue_2.5.22.js"></script>
    <script src="lib/vue-router_3.0.2.js"></script>

2. 写路由链接，其中<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.定义路由组件：

3. 创建路由对象，并创建规则：
   
4. 最后将路由挂载到实例上面
   

4. 路由嵌套

在Login的模板字符串中写入子路由

然后在Login路由下面创建子路由

5. 路由动态参数配置

props：后面也可以是对象形式，或者写true只传id，User里面的props接收这里传过去的数据；

还可以给路由命名如name:'user'