Vue router的安装及基础用法

vue

一、 Vue router安装

1.打开Vue项目,在终端中输入安装命令

命令如下:

npm install vue-router

cnpm install vue-router

yarn add vue-router(这里推荐使用第三种方法,速度快报错几率小)

2.安装成功后在src中新建router.js文件,引入代码:

3.在components中新建Conten.vue(不强制要求)


4.在src页面下中新建view文件夹,在view新建文件夹,例如Home,在文件夹中新建index.vue,导入上一步的Content并引入如下代码:

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内引入

7.在main.js中 import router from ‘./router’

效果图如下:

以上是 Vue router的安装及基础用法 的全部内容, 来源链接: utcz.com/z/377453.html

回到顶部