1.首先下载并载入js脚本:
<script type="text/javascript" src="./vue.js" ></script> <script type="text/javascript" src="./vue-router.js" ></script>
2.创建一个实例供vue使用:
<div id="wrap"> <router-link to="/index" > index </router-link> <router-link to="/user" > user </router-link> //设置两个路由 /index和/user <transition mode="out-in" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight"> <router-view></router-view>//路由视窗 </transition> </div>
script:
new Vue({ el:"#wrap", //div的id名称 实例化 data:{ //数据存放(暂时为空仅验证后面router) }, router:router, //添加router })
3.接下(在vue中)来定义router,从官网上我们可以知道定义router的方法:var router = new VueRouter({ routes:routeName});
var router = new VueRouter({ routes: [ { path: ‘/index‘, component: list1}, { path: ‘/user‘, component: list2}, {path:"*",component:list1} ] }) (注:routes是一个数组 同等于: var test = [ {path:"/index",component:list1 }, {path:"/user",component:list2 }, {path:"*",component:list1} ] var router = new VueRouter({ routes: test }) )
4.定义component渲染模板:list1 和 list2 -----这部分用到了局部组件的知识
<template id="list1"> <div> <h3> index 页面 </h3> <ul> <li>1111111111111</li> <li>222222222222222</li> <li>333333333333</li> <li>44444444444444</li> <li>4444444444444</li> </ul> </div> </template> <template id="list2"> <div> <h3> user 页面 </h3> <ul> <li>aaaaaaaaaaaaaaa</li> <li>bbbbbbbbbbbbbbbbbbb</li> <li>cccccccccccccccccc</li> <li>ddddddddddddddddd</li> <li>eeeeeee</li> </ul> </div> </template> <!--注意template里面只能写一个div标签-->
script中:
var list1 = { template:"#list1", } var list2 ={ template:"#list2", }
就可以实现简单的路由功能了
时间: 2024-10-29 04:53:07