Foreword

In order to give readers a better experience, to understand vue-router and the next presentation vuex, decided to bring you a real tutorial to go more in-depth understanding vue-router, before that, the reader to understand themselves and go to the official website to download and npm node, attached: npm official website

Construction of the project

Here I used vue-cli + webpack build the initial project, the official website and there was vue related presentations , where I taught you about it, first by entering the console under the relevant file directory and enter

# 后面是注释
# $表示当前文件目录

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
# 运行项目my-preoject
$ npm run dev

npm install --global vue-cli download build tools

vue init webpack my-project initialization program
npm install download resources to node_models

After npm run dev run the project, in a browser enter HTTP: // localhost : 8080 / # / see

Introduction vue-router

After a simple construction of the above, initializing a project is complete, here vue-cli and webpack has helped us somehow file directory structure and basic directory

Before using vue-router is performed, first while I had to explain what vue-router that?

It is the routing component under a vue.js, what is routing? There are a lot of online official introduction, and I believe that white is hard to understand, and here I will simply explain it.

In fact, the route is url, url What is it? url is the only resource locator, simply put, is the only one label tag pages exist, like https://www.baidu.com , where www.baidu.com is the only resource locator, https just a protocol, standardized communication protocol of a computer network.

Introduction to this, then for us exactly how to use it?

其实很简单，在平时当中，我们就经常碰到在一个网站里面点击链接会弹到另外一个页面，然后就可以发现他们的url改变了，而vue-router就是这样，在同个域名下（这里的域名是http://localhost:8080），改变域名后面的字符参数，比如http://localhost:8080/me和http://localhost:8080/you是两个不同的页面就是靠vue-router进行实现的。

引用vue-router

如果你在之前没有安装vue-router的话，建议可以先去官网，看着文档使用npm安装一下，这里就不多做介绍了。

首先我先在项目my-project/src/components（存放组件的目录）里面添加两个文件me.vue和you.vue

// me.vue
<template>
  <div>
    我是me
  </div>
</template>

<script type="text/ecmascript-6">
export default {}
</script>

<style scoped>
</style>

// you.vue
<template>
  <div>
    我是you
  </div>
</template>

<script type="text/ecmascript-6">
export default {}
</script>

<style scoped>
</style>

然后修改my-project/src/router（存放路由相关信息的目录）下面修改index.js成

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// 导入组件
import me from '../components/me'
import you from '../components/you'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    // 将组件命名到路由上，输入http://localhost:8080/#/me
    // 即可进入不同的页面
    {
      path: '/me',
      component: me
    },
    // 将组件命名到路由上，输入http://localhost:8080/#/you
    // 即可进入不同的页面
    {
      path: '/you',
      component: you
    }
  ]
})

这样只会输入http://localhost:8080/#/me就会进到其他页面，是不是很简单，
那么我们怎么在页面里面进行跳转呢？

这就运用到了更有趣的知识了就是router-link你只要在你的组件的代码下输入

<router-link :to="/me">这里是跳转链接</router-link>

网页就自动跳转到http://localhost:8080/#/me页面了，但是这样总是不好的，因为，如果由于一些原因，我们想修改路由的名字（比如me改成him）就得改两个文件的信息，因此，vue团队也早就想好了，就是name属性，将my-project/src/router（存放路由相关信息的目录）下面修改index.js成

    // ...
    {
      path: '/me',
      name: 'me',
      component: me
    },
    // ...

然后跳转就改成

<router-link :to="{ name: 'me'}">这里是跳转链接</router-link>

就可以进行跳转了

高级应用

The most junior front-end routing applications, just as cited above, of course, can also be changed by js code, this is also very simple, that is, such as adding a button, click the button to jump to other pages by js is redirected, simple js code is also under way, you can jump to other pages of

vue.$router.push('/me')

Passing parameters through dynamic routing router-link, e.g. <router-link: to = "{name: 'user', params: {userId}}"> User </ router-link>, passing the userId parameter, different rendering routing information
Nested Nested routing routing fact, a simple understanding is that the child routes, for example, I would like to add a few routes in me under him and that she could write the above code after entering the HTTP: // localhost : 8080 / # / me / him to get into the sub-routing of page

// ...
    {
      path: '/me',
      name: 'me',
      component: me，
      children: [
        {
            path: 'him'
            // ...
        },
        {
            path: 'she'
            // ...
        }
      ]
    },
    // ...

Lazy loading component combined and asynchronous trigger ajax request for acquiring data created on the hook assembly, the load time is reduced can be maximized, reducing the consumption flow. This item is not for people who may come into contact is relatively small, it is recommended to know the concept.
Redirection can be achieved certain requirements need to change the original route of the page according to a specific logic, such as routing should be redirected to the login page when the page is accessed "personal information" under the simple route not logged in.
History History is new syntax control Html5, individuals think it is time to jump, especially small micro-channel program, is to control click on the back button when not exit pages and jump to the page you want

to sum up

There are many advanced application scenarios, I will not list them out, because they are in fact better explained on the official document, I am here just to explain simple usage, as well as beginners will be possible for official documents to misunderstanding explain, I hope we still learn to look at API, attached official website address

Vue learning diary (three) - Vue route management vue-router