一、 Vue router安装
1.打开Vue项目,在终端中输入安装命令
命令如下:
npm install vue-router
cnpm install vue-router
yarn add vue-router(这里推荐使用第三种方法,速度快报错几率小)

2.安装成功后在src中新建router.js文件,引入代码:
Vue router的安装及基础用法
3.在components中新建Conten.vue(不强制要求)

Vue router的安装及基础用法
4.在src页面下中新建view文件夹,在view新建文件夹,例如Home,在文件夹中新建index.vue,导入上一步的Content并引入如下代码:
Vue router的安装及基础用法
5.在router.js中设置如下两步
第一步:
import Home from ‘./views/Home/’ 导入之前的Home文件夹
第二步:
export default new VueRouter ({
routes: [
{
path: ‘/’,
redirect: ‘/home’ //设置默认指向
},
{
path: ‘/home’, 此处是之前给页面起的别名
component: Home
},
]
})
6.在App.vue中的div内引入
Vue router的安装及基础用法
7.在main.js中 import router from ‘./router’
Vue router的安装及基础用法
效果图如下:
Vue router的安装及基础用法

相关文章:

  • 2021-10-30
  • 2021-05-17
  • 2022-12-23
  • 2022-12-23
  • 2022-01-31
  • 2022-12-23
  • 2021-07-20
  • 2021-11-01
猜你喜欢
  • 2021-11-27
  • 2021-07-16
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-01-02
  • 2022-12-23
相关资源
相似解决方案