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>

巴特西

vue.js（20）--vue路由

最新文章

热门文章