Vue router的安装及基础用法
一、 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