个人github:https://github.com/qiilee  欢迎follow
vue1.0写法:

html:
   <a v-link="{path:'/home'}">主页</a>  跳转链接
   
   展示内容:
   <router-view></router-view>
js:
   //1. 准备一个根组件
   var App=Vue.extend();

   //2. Home News组件都准备
   var Home=Vue.extend({
      template:'<h3>我是主页</h3>'
   });

   var News=Vue.extend({
      template:'<h3>我是新闻</h3>'
   });

   //3. 准备路由
   var router=new VueRouter();

   //4. 关联
   router.map({
      'home':{
         component:Home
      },
      'news':{
         component:News
      }
   });

   //5. 启动路由
   router.start(App,'#box');

跳转:
   router.redirect({
      ‘/’:'/home'
   });

----------------------------------------------------------

vue2.0写法:

1. 布局  <router-link to="/home">主页</router-link> <router-view></router-view> 2. 路由具体写法  //组件  var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻</h3>' }; //配置路由  const routes=[ {path:'/home', componet:Home}, {path:'/news', componet:News}, ]; //生成路由实例  const router=new VueRouter({ routes }); //最后挂到vue上  new Vue({ router, el:'#box' }); 3. 重定向  之前 router.rediect 废弃了  {path:'*', redirect:'/home'}


如有建议,敬请评论!!!
个人邮箱:qiilee@126.com
 

Logo

前往低代码交流专区

更多推荐