Home > Article > Web Front-end > Detailed explanation of vue-router single page routing

Detailed explanation of vue-router single page routing

怪我咯Original: 2017-07-04 15:04:031901browse

This article mainly introduces the relevant information of vue-router single page routing in detail. It has certain reference value. Interested friends can refer to it

vue Among them, there is a class library called vue-router, which is used for single-page routing. Routing is generally divided into four steps:

Prepare a root component vue.extend();
Prepare template for the content that needs to be routed ;
Prepare routing new VueRouter();
Associated routing map
Start routing start (App,'#box'); //The first parameter is the prepared root component, and the second parameter is the location to be bundled in the id defined by yourself

## Download address of vue-router on #github:

https://github.com/vuejs/vue-router

The simple code for routing jump is as follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/vue.js" ></script>
    <script type="text/javascript" src="js/vue-router.js" ></script>
    <script type="text/javascript" src="js/vue-resource.js" ></script>
    <title></title>
  </head>
  <body>
    <p id="box">
      <ul>
        <li>
          <a v-link="{path:&#39;/home&#39;}">我是第一个a</a>
        </li>
        <li >
          <a v-link="{path:&#39;news&#39;}">我是第二个a</a>
        </li>
      </ul>
      <p>
        <router-view></router-view>
      </p>
    </p>
  </body>
  <script>
    //1.准备一个根组件
    var App=Vue.extend();
    
    //2.Home News 组件准备
    var Home=Vue.extend({
      template:&#39;<h3>我是第一个a的内容页</h3>&#39;
    });
    
    var News=Vue.extend({
      template:&#39;<h3>我是第二个a的内容页</h3>&#39;
    })
    
    //3.准备路由
    var router = new VueRouter();
    
    //4.关联
    
    router.map({
      &#39;home&#39;:{
        component:Home
      },
      &#39;news&#39;:{
        component:News
      }
    })
    
    //5.启动路由
    
    router.start(App,&#39;#box&#39;);
  </script>
</html>

The above is the detailed content of Detailed explanation of vue-router single page routing. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Examples of operations such as adding and deleting DataTablesNext article：Examples of operations such as adding and deleting DataTables

See more

Detailed explanation of vue-router single page routing

Related articles