Home > Web Front-end > JS Tutorial > body text

Detailed explanation of vue-router single page routing

怪我咯
Release: 2017-07-04 15:04:03
Original
1892 people have browsed it

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>
Copy after login

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!

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!