路由的入门,学会做简单的路由

引入Vue-router.js 的类库


创建一个VueRouter实例,

const  router=new VueRouter({
routes:[
	{path:"/one',componoent:one},
	{path:"two",component:two}
]//路由规则/配置
})

在vue实例中引用路由

new Vue({
el:"#app",
router,
//*es6写法*/
}

在页面中写路由界面

one two

在router-link中写好路径名称

one
two

打开浏览路由效果

路由的入门,学会做简单的路由_第1张图片
完整的代码:


	
		
	
		
		
one two
欢迎添加小明同学的微信:15005935876一起快乐学前端

你可能感兴趣的:(vue路由,前端,路由,前端教程,前端)