前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端基础-Vue.js单页应用

前端基础-Vue.js单页应用

作者头像
cwl_java
发布2020-03-26 16:25:02
1.8K0
发布2020-03-26 16:25:02
举报
文章被收录于专栏:cwl_Java

第11章 单页应用

11.1 单页应用

  • 什么是单页应用 单页应用(single page web application,SPA),是在一个页面完成所有的业务功能,浏览器一开始会加载必需的HTML、CSS和JavaScript,之后所有的操作都在这张页面完成,这一切都由JavaScript来控制。
  • 单页应用优缺点
    • 优点
      • 操作体验流畅
      • 完全的前端组件化
    • 缺点
      • 首次加载大量资源(可以只加载所需部分)
      • 对搜索引擎不友好
      • 开发难度相对较高

优缺点都很明显,但是我们都还没尝试过就来评价,就会显得空口无凭;接下来我们先来学习制作单页应用,然后再来进行点评;

11.2 vue路由插件vue-router

https://cn.vuejs.org/v2/guide/routing.html

https://router.vuejs.org/zh/

代码语言:javascript
复制
<!-- 引入路由 -->
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>

<div id="app">
    <ul>
        <li><a href="#/login">登录</a></li>
        <li><a href="#/register">注册</a></li>
    </ul>
    <!-- 路由中设置的组件会替换router-view标签 -->
    <router-view></router-view>
</div>
<script>
    // 1:定义路由组件
    var login = {
        template: '<h2>我是登录页面</h2>'
    }
    var register = {
        template: '<h2>注册有好礼</h2>'
    }

    // 2:获取路由对象
    var router = new VueRouter({
        // 定义路由规则
        routes: [
            // {请求的路径,componet是模板}
            { path: "/register", component: register },
            { path: "/login", component: login },
        ]
    })

    var app = new Vue({
        el: '#app',
        // ES6 属性简写
        // 3:将router对象传入Vue
        router
    })

</script>

上例中,在HTML中我们直接使用了 a 标签,但是这样并不好,因为官方为我们提供了 router-link 标签

代码语言:javascript
复制
<div id="app">
    <ul>
        <li><router-link to="/login">登录</router-link></li>
        <li><router-link to="/register">注册</router-link></li>

        <!-- <li><a href="#/login">登录</a></li>
        <li><a href="#/register">注册</a></li> -->

        <!-- router-link 会被解析为a标签 -->
        <!-- 
            不同的是,router-link在解析为a标签后,
            会自动为点击的 a 标签添加class属性
         -->
    </ul>
    <!-- 路由中设置的组件会替换router-view标签 -->
    <router-view></router-view>
</div>

使用 router-link 的一大好处就是,每当我们点击时,在标签内就会自动帮我们添加 class 属性,而此时,我们就可以利用 class 属性,来定义样式:

代码语言:javascript
复制
<style>
    .router-link-active {
        color: red;
    }
</style>

11.3 动态路由匹配

假设有一个用户列表,想要删除某一个用户,需要获取用户的id传入组件内,如何实现呢?

此时可以通过路由传参来实现,具体步骤如下:

  1. 通过 传参,在路径上传入具体的值 <router-link to="/users/120">用户管理</router-link>
  2. 路由规则中增加参数,在path最后增加 :id { name: 'users', path: '/users/:id', component: Users },
  3. 在组件内部可以使用,this.$route 获取当前路由对象 var Users = { template: '<div>这是用户管理内容 {{ $route.params.id }}</div>', mounted() { console.log(this.$route.params.id); } };
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 第11章 单页应用
    • 11.1 单页应用
      • 11.2 vue路由插件vue-router
        • 11.3 动态路由匹配
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档