当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue-router（路由）基本操作

vue-router（路由）基本操作

2020年07月27日  | 移动技术网IT编程  | 我要评论

一、安装

在终端用npm install vue-router或cnpm install vue-router或yarn add vue-router，建议使用cnpm安装。

二、创建组件

1、在src下新建router.js文件，并引用以下代码：
在这里插入图片描述
在这里插入图片描述

2、在component里创建Content.vue文件，并引用以下代码
在这里插入图片描述
在这里插入图片描述

3、在src中新建view文件夹，在views新建Home文件夹，在文件夹中新建index.vue，并引用以下代码：
在这里插入图片描述

在这里插入图片描述

4、在router.js中设置代码如下：

在这里插入图片描述

5、在App.vue中的div内引入router-view

在这里插入图片描述

6、在main.js中 import router from ‘./router’，在new的实例中增加router，具体如下：

在这里插入图片描述

效果如下：

在这里插入图片描述

本文地址：https://blog.csdn.net/Idvms/article/details/107557400

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网