vue.js（20）--vue路由

后端路由

对于普通的网站，所有的超链接都是url地址，所有的url地址都对应着服务器上的资源

前端路由

对于单页面应用程序来说，主要通过单页面中的hash（#）来进行页面的切换。hash的特点是http的请求中不会包含hash中的相关内容，所以单页面中的hash跳转主要用hash实现。通过hash来切换页面叫做前端路由。

基本路由结构

1.导入vue-router.js,注意先后顺序

    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router-3.0.1.js"></script>

2.创建一个控制区域与vm实例

<div class="app">


</div>
<script>
        var vm = new Vue({
        el:'.app'
    }) 
</script>

3.创建组件，并定义组件量

<template id="login">
        <div><h1>登录组件</h1></div>
    </template>
    <template id="register">
        <div><h1>注册组件</h1></div>
    </template>


<script>
var login ={
            template:'#login'
        }
        var register={
            template:'#register'
        }
</script>

4.创建一个router实例，设定路由地址与组件

        var router= new VueRouter({
            routes:[//注意此处的routes
                {path:'/login',component:login},
                {path:'/register',component:register}
            ]
        })

5.在vm实例中关联router实例

        var vm = new Vue({
        el:'.app',
        router:router//可简写为router
    }) 

6.页面通过router-view创建组件显示区域，通过router-link绑定路由地址，实现组件切换。

    <div class="app">
        <router-link to="/login?id=20">登录</router-link>
        <!-- 注意router-link的使用，地址中可以传参 -->
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>