vue路由vue-router

最新推荐文章于 2024-08-10 18:26:28 发布

酷码66

最新推荐文章于 2024-08-10 18:26:28 发布

阅读量46

点赞数

分类专栏： vue2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_61919625/article/details/129658443

版权

vue2 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

单页面应用（SPA）通过加载单一HTML页面并使用JavaScript动态更新来提供流畅的用户体验。它依赖MVVM模式、Ajax进行数据交互，并通过路由处理页面视图的切换。在Vue.js中，创建组件、配置路由、创建路由对象以及将router注入Vue实例是实现路由的关键步骤。

摘要由CSDN通过智能技术生成

.spa（单页面应用）

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

特点

1.速度：更好的用户体验，让用户在web app感受native app的速度和流畅。

2.MVVM：经典MVVM开发模式，前后端各负其责。

3.ajax：重前端，业务逻辑全部在本地操作，数据都需要通过AJAX同步、提交。

4.路由：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载。

例如：

单页Web应用（single page web application，SPA）是当今网站开发技术的弄潮儿，很多传统网站都在或者已经转型为单页Web应用，新的单页Web应用网站（包括移动平台上的）也如雨后春笋般涌现在人们的面前，如Gmail、Evernote、Trello等。如果你是一名Web开发人员，却还没开发过或者甚至是没有听说过单页应用，那你已经Out很久了。

单页Web应用和前端工程师们息息相关，因为主要的变革发生在浏览器端，用到的技术其实还是HTML+CSS+JavaScript，所有的浏览器都原生支持，当然有的浏览器因为具备一些高级特性，从而使得单页Web应用的用户体验更上一层楼。关于单页应用的优点和缺点，网上讲解的文章有很多，这里就不展开论述了。单页Web应用，顾名思义，就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript，之后所有的操作都在这张页面上完成，这一切都由JavaScript来控制。因此，单页Web应用会包含大量的JavaScript代码，复杂度可想而知，模块化开发和设计的重要性不言而喻。

2.路由

单页面应用中，视图的切换需要通过路由实现。
路由的特点：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载。

如：

获取商品信息：

获取用户信息:

前端路由根据#后内容的改变，而去请求不同的内容，但是实际访问的还是那个页面，因为#后不管如何改变，页面地址是不变的

3.路由的实现-美团路由

第一步：创建组件

创建组件：首页、发现、订单、我的

引入路由插件

const Index = {
    template: `
        <div>首页</div>
    `
}
const  Find = {
    template: `
        <div>发现</div>
    `
}

const  Order = {
    template: `
        <div>订单</div>
    `
}
const  My = {
    template: `
        <div>我的</div>
    `
}

第二步：配置路由

每个路由都是一个对象，很多对象集合组成数组
当我们访问路由地址时，<router-view>这个内置组件就会被渲染为路由对应的组件内容

const routes = [
  {
    path:'/',
    component: Index 
  },
  {
    path:'/find',
    component: Find 
  },
  {
    path:'/order',
    component: Order 
  },
  {
    path:'/my',
    component: My 
  },

]

第三步：创建路由对象

const router = new VueRouter({
    routes: routes,
    linkExactActiveClass: 'active'
});

第四步：将router放入new 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="/find">发现</router-link>
      <router-link to="/order">订单</router-link>
      <router-link to="/my">我的</router-link>
    </nav>
</div>