Single-page application front-end basis -Vue.js

Chapter 11 single-page application

11.1 Single Page Application

• What is a single-page application

  Single Page Application (the Application Web Page SINGLE, SPA ), a page is completed in all business functions, the browser will start to load the necessary HTML, CSS and JavaScript, after all operations are completed in this page, it's all controlled by JavaScript.

• Advantages and disadvantages of single-page application

  • advantage
    • Smooth operating experience
    • The front end assembly of the complete
  • Shortcoming
    • First loads a lot of resources (to load only the required part)
    • Search engine friendly
    • Develop relatively high degree of difficulty

The advantages and disadvantages are obvious, but we have not tried to evaluate it, it will seem empty rumor; then we first learn to make a single-page application, and then come back for comment;

11.2 vue routing plug-vue-router

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

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

<!-- 引入路由 -->
<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>

In the above example, the HTML directly, we use a label, but this is not good for us because of the official router-linklabel

<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>

Use router-link is a major advantage is that, whenever we click within the label will automatically help us to add class attributes, but this time, we can use the class attribute to define the style:

<style>
    .router-link-active {
        color: red;
    }
</style>

11.3 Dynamic Routing match

Suppose you have a list of users, within the id of incoming components that you want to delete a user, the user needs to get, how to achieve it?

At this time, parameter passing can be achieved by routing the following steps:

1. Parameter passing through, in particular the value of the path for incoming

   <router-link to="/users/120">用户管理</router-link>
   

2. Routing rules increase the number, the last increase in path : the above mentioned id

   { name: 'users', path: '/users/:id', component: Users },
   

3. You can use the internal components, the this. $ Route to get the current route object

   var Users = {
       template: '<div>这是用户管理内容 {{ $route.params.id }}</div>',
       mounted() {
           console.log(this.$route.params.id);
       }
   };