vue 路由组件

章鱼喵

发布于 2019-10-17 23:14:42

5930

发布于 2019-10-17 23:14:42

文章被收录于专栏：coding codingcoding

单页面应用

单页应用(single page web application，SPA)，是在一个页面完成所有的业务功能，浏览器一开始会加载必需的HTML、CSS和JavaScript，之后所有的操作都在这张页面完成，这一切都由JavaScript来控制。

优点:

操作体验流畅
完全的前端组件化

缺点:

首次加载大量资源(可以只加载所需部分)
对搜索引擎不友好
开发难度相对较高

要实现单页面应用就必须使用路由组件

vue路由插件vue-router

官方文档

<div id="app">
  <ul>
    <!-- router-link 会被解析为a标签，且会自动为点击的 a 标签添加 class 属性 -->
    <li><router-link to="/login">登录</router-link></li>
    <li><router-link to="/register">注册</router-link></li>
  </ul>
  <!-- 路由中对应的组件会替换 router-view 标签 -->
  <router-view></router-view>
</div>

<script>
  // 1. 定义路由组件
  let login = {
      template: "<h1>登录页面</h1>"
  };
  let register = {
      template: "<h1>注册页面</h1>"
  };

  // 2. 获取路由对象
  let router = new VueRouter({
      // 声明路由
      routes: [
          {path: '/login', component: login},
          {path: '/register', component: register},
      ]
  });
  let app = new Vue({
      el: "#app",
      // 3. 将 router 对象传入 vue
      router: router,
  });
</script>

原文 https://www.itshutong.com/236.html

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.10.16 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript