vue-router单页面路由

2019-11-19 16:19:04

字体：大中小

来源：转载

供稿：网友

vue中，有一个类库叫做vue-router，是用来做单页面路由的。做路由一般分为四个步骤：

准备一个根组件　　vue.extend()；
需要做路由的内容准备　　template；
准备路由 new VueRouter（）；
关联路由 map
启动路由 start(App,'#box')；//第一个参数是准备的根组件，第二个参数是要捆绑的位置就是自己定义的id中

github上vue-router下载地址：https://github.com/vuejs/vue-router

关于路由跳转的简单代码如下：

<!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>    <div id="box">      <ul>        <li>          <a v-link="{path:'/home'}">我是第一个a</a>        </li>        <li >          <a v-link="{path:'news'}">我是第二个a</a>        </li>      </ul>      <div>        <router-view></router-view>      </div>    </div>  </body>  <script>    //1.准备一个根组件    var App=Vue.extend();        //2.Home News 组件准备    var Home=Vue.extend({      template:'<h3>我是第一个a的内容页</h3>'    });        var News=Vue.extend({      template:'<h3>我是第二个a的内容页</h3>'    })        //3.准备路由    var router = new VueRouter();        //4.关联        router.map({      'home':{        component:Home      },      'news':{        component:News      }    })        //5.启动路由        router.start(App,'#box');  </script></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：详解webpack+vue-cli项目打包技巧

下一篇：详解JS获取HTML DOM元素的8种方法