vue 2.0的路由比起1.0简单了许多,分为以下几个步骤;
1.创建路由块和视图块;
to里面是要切换的路径名称
<div id="app"> <div> <router-link to="/home">主页</router-link> <router-link to="/news">新闻</router-link> </div> <div> <router-view></router-view> </div> </div>
2.写组件
var Home={ template:‘<h3>我是主页</h3>‘ }; var News={ template:‘<h3>我是新闻</h3>‘ };
3、
//配置路由 var routes=[ {path:‘/home‘, component:Home}, {path:‘/news‘, component:News}, //重镜像,相当于是主页 {path:‘*‘, redirect:‘/home‘} ];
4、创建路由实例
var router = new VueRouter({ routes :routes //routes是一个参数 })
5、
//最后挂到vue上 new Vue({ router, el:‘#box‘ });
效果:
时间: 2024-10-25 11:16:36