Vue --- vue-router的安装和配置方式

一、安装
win+r打开控制台,通过控制台找到你目前vue的项目目录
输入npm install vue-router --save,回车即可
在这里插入图片描述

二、配置方式
1、如果这里没有router文件夹,新建一个,并且在该文件夹新建一个index.js来配置相关信息
Vue --- vue-router的安装和配置方式_第1张图片
2、在刚创建的index.js中配置以下代码
Vue --- vue-router的安装和配置方式_第2张图片

3、最后在main.js中导入
Vue --- vue-router的安装和配置方式_第3张图片

4、创建两个组件Home.vueAbout.vue
Vue --- vue-router的安装和配置方式_第4张图片

5、在router下的index.js文件中导入组件
Vue --- vue-router的安装和配置方式_第5张图片

6、在App.vue中写上
就是指跳转到某个组件,相当于a标签;
则是将对应组件的内容显示出来
Vue --- vue-router的安装和配置方式_第6张图片
Vue --- vue-router的安装和配置方式_第7张图片
最后,当我点击首页时
Vue --- vue-router的安装和配置方式_第8张图片
当我点击关于时
Vue --- vue-router的安装和配置方式_第9张图片

7、如果想要改变hash模式并且默认为home首页,只需在router文件夹下的index.js中改成如下图即可
Vue --- vue-router的安装和配置方式_第10张图片
Vue --- vue-router的安装和配置方式_第11张图片

你可能感兴趣的:(Vue)