通过vue官方脚手架工具在vue项目引入router路由模块实现页面跳转

1 在项目中添加vue路由vue-router依赖包

可以使用 npm install vue-router , 或者 vue add router

npm install vue-router

vue add router

进入项目目录输入命令,等待依赖导入
通过vue官方脚手架工具在vue项目引入router路由模块实现页面跳转_第1张图片
安装完成后会在项目中生成router文件夹和index.js文件和About.vue,Home.vue等两个测试页面文件
通过vue官方脚手架工具在vue项目引入router路由模块实现页面跳转_第2张图片
index.js文件介绍
通过vue官方脚手架工具在vue项目引入router路由模块实现页面跳转_第3张图片
main.js文件介绍
通过vue官方脚手架工具在vue项目引入router路由模块实现页面跳转_第4张图片
app.vue文件介绍 在项目启动模板页App.vue上面有个路由视图组件,相当于是一个占位符一样(插槽也类似),之后页面的路由变化引起的页面替换都是在路由视图上进行。不能删除。
通过vue官方脚手架工具在vue项目引入router路由模块实现页面跳转_第5张图片

你可能感兴趣的:(vue,npm)