vue中的静态路由

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。
特点

速度：更好的用户体验，让用户在web app感受native app的速度和流畅，
·MVVM：经典MVVM开发模式，前后端各负其责。
·ajax：重前端，业务逻辑全部在本地操作，数据都需要通过AJAX同步、提交。
·路由：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载

第一步：创建组件模板

const Index = {

    template: `

        <div>首页</div>

    `

}

const  Find = {

    template: `

        <div>发现</div>

    `

}

const  Nearby = {

    template: `

        <div>附近</div>

    `

}

const  Order = {

    template: `

        <div>订单</div>

    `

}

const  My = {

    template: `

        <div>我的</div>

    `

}

第二部，配置路由

const routes = [

    {

       path:'/',

       component: Index

    },

    {

       path:'/find',

       component: Find

    },

    {

       path:'/nearby',

       component: Nearby

    },

    {

       path:'/order',

       component: Order

    },

    {

       path:'/my',

       component: My

    },

]

第三部创建路由对象

const router = new VueRouter({

    routes: routes,

    linkExactActiveClass: 'active'

});

第四部将router当今vue

const app = new Vue({

      el: '#app',

      // router: router

      router

 })

第五部模板

<div id="app">

    <header>美团外卖</header>

    <router-view></router-view>

    <nav>

      <router-link to="/">首页</router-link>

      <router-link to="/nearby">附近</router-link>

      <router-link to="/find">发现</router-link>

      <router-link to="/order">订单</router-link>

      <router-link to="/my">我的</router-link>

    </nav>

</div>

巴特西

vue中的静态路由

最新文章

热门文章