第四课 vue路由router-link跳转

第一步:再components文件夹中再创建一个hi.vue,包装至少有2个组件


第二步:给hi.vue添加基本结构代码

第四课 vue路由router-link跳转_第1张图片

第三步:配置router/index.js,导入hi.vue组件,并且建立一个路径,并与访问

第四课 vue路由router-link跳转_第2张图片

第四步:打开App.vue文件,写跳转代码

第四课 vue路由router-link跳转_第3张图片

跳转的另一种写法也可以写:

为什么要写成:to呢,目的是可以声明一个变量去配置,如图:

第四课 vue路由router-link跳转_第4张图片

或者你也可以这样写:

第四课 vue路由router-link跳转_第5张图片

第五步:去掉地址栏上的#

第四课 vue路由router-link跳转_第6张图片


第四课 vue路由router-link跳转_第7张图片

进入router/index.js路由配置文件中,加入代码

第四课 vue路由router-link跳转_第8张图片

大功告成,这样就可以跳转了

你可能感兴趣的:(第四课 vue路由router-link跳转)