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>

猜你喜欢