当前位置: 首页 > Web前端 > vue.js

vue-cli创建的项目如何使用路由方式实现页面跳转——关键点

时间:2023-03-31 23:04:13 vue.js

1.创建项目vuecreatetake-out输入命令后,这里会停顿一会,按方向键然后就可以手动选择项目需要的配置了。或者回车自动创建工程(不过自动创建的工程可能没有路由文件夹router,我只是手动选择了工程需要的配置,创建了很多次,呜呜……)二、配置文件目录自己设置目录。删除项目自带的不用的文件,下图选中的都是新添加的目录写入页面。这里要注意,中根目录只能有一个,所以要加上

3.路由文件夹下写路由index.jsrouter是路由文件,写在index.js页面输入1和2两个代码。就是在底部导航栏引入四个页面,并配置四个页面的路径。路径一般小写,组件(component)首字母一般大写。这里要注意普通路径和重定向路径的区别:重定向(redirection)是路径,不是组件(component)。四、在main.js中引入一些路由如果没有routing文件夹router,则在main.js中引入路由。如果路由配置不好,重建一个工程,手动选择工程需要的配置补充:配置路由后,会产生一些结果:1.morerouter-view,router-link组件标签,2.more$route,$router属性可以访问5.App.vue中引入底部导航栏和四个页面显示路由组件第一步:1.1引入底部导航栏3步:2.1-2.2-2.36.实现效果可以跳转通过修改url到页面