vue 路由的概念，和 vue路由语法详解

1.路由的概念
路由本质就是一种对应关系，比如说我们在url地址中输入，我们要访问的地址，浏览器要去请求这个url地址对应的资源，那么url地址和真实资源之间有一种对应的关系，就是路由

路由分前端路由和后端路由
（1）后端路由是由服务器端进行实现的
（2）前端路由是依靠hash值（锚链接）的变化进行实现的

2.vue路由语法详解
vue路由是通过hash（锚链接的方法）对事数据的刷新的
总结以下几点：
1.引入vue.js
2.构造切换组件的模块
3.构造组件的占位符（占位符的名字可以随意取，但是属性值必须 :is='变量'）
4.在vue实例里面添加一个变量作为占位符的变量
5.在vue实例里面注册几个局部组件
6.通过onhashchange 监听 hash值， hash可以通过 location.hash 获取，取到相对的值，对其值赋值，

简单点说就是通过地址栏变化而进行组件的变换

		
    <!-- //引入vue.js --> 
	
		    <script type="text/javascript" src="js/vue.js"></script>
	
		    <div id="app">
	
		        {{msg}}
	
		        <hr/>
	
		        <!-- //构建文件 --> 
	
		        <ul>
	
		            <a href="#/dh1">导航1</a>
	
		            <a href="#/dh2">导航2</a>
	
		            <a href="#/dh3">导航3</a>
	
		        </ul>
	
		        <!-- 构建模板 --> 
	
		        <ul>
	
		            <c :is="son"></c>
	
		        </ul>
	
		    </div>
	
		    <script type="text/javascript">
	
		        // 通过onhashchange 监听 hash的值 
	
		        //通过 location.hash 可以获取到 hash值 
	
		        window.onhashchange = function() {
	
		            switch (location.hash) {
	
		                case '#/dh1':
	
		                    vm.son = 'dh1' 
	
		                    break 
	
		                case '#/dh2':
	
		                    vm.son = 'dh2' 
	
		                    break 
	
		                case '#/dh3':
	
		                    vm.son = 'dh3' 
	
		                    break 
	
		            }
	
		        }
	
		        //vue实例 
	
		        var vm = new Vue({
	
		            el: '#app',
	
		            data: {
	
		                msg: 'Hello Vue',
	
		                son: 'dh2' 
	
		            },
	
		            //组件 
	
		            components: {
	
		                dh1: {
	
		                    template: `<div>我是dh1</div>` 
	
		                },
	
		                dh2: {
	
		                    template: `<div>我是dh2</div>` 
	
		                },
	
		                dh3: {
	
		                    template: `<div>我是dh3</div>` 
	
		                }
	
		            }
	
		        });
	
		    </script>