一、安装
win+r打开控制台,通过控制台找到你目前vue的项目目录
输入npm install vue-router --save,回车即可
Vue --- vue-router的安装和配置方式

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

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

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

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

6、在App.vue中写上<router-link to=""></router-link><router-view></router-view>
<router-link to=""></router-link>就是指跳转到某个组件,相当于a标签;
<router-view></router-view>则是将对应组件的内容显示出来
Vue --- vue-router的安装和配置方式
Vue --- vue-router的安装和配置方式
最后,当我点击首页时
Vue --- vue-router的安装和配置方式
当我点击关于时
Vue --- vue-router的安装和配置方式

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

相关文章:

  • 2022-12-23
  • 2021-05-17
  • 2022-12-23
  • 2021-11-19
  • 2022-12-23
  • 2022-12-23
  • 2021-12-12
  • 2021-09-25
猜你喜欢
  • 2022-12-23
  • 2021-07-16
  • 2023-03-11
  • 2022-12-23
  • 2021-05-17
  • 2022-12-23
相关资源
相似解决方案