vue-router的简单应用

首先,依然是附上vue router的官网的文档链接
https://router.vuejs.org/zh/

让我们来实现vue-router最简单的应用吧

官方的例子也很好,大家也可以直接去看官网的案例

第一步:初始化一个vue/cli项目

vue create navmenu

打开package.json文件,我们可以查看是否已经安装了vue-router

如果没有则,安装一下

npm install vue-router --save

第二步:新建router文件夹(文件夹内新建index.js),并引入vue-router

我会选择在main.js同级目录下新建

在router/index.js中引入vue-router

第三步:创建页面组件,配置router/index.js基本信息

1.在router文件同级目录下创建view文件夹,并创建页面组件

2.所有页面组件代码相同,为最简单的结构(以home.vue为例)

3.router/index.js懒加载页面组件并配置基本属性

第四步:挂载到根实例,并指定渲染地

不要忘了挂载到实例中哟!

src/main.js

src/App.vue

现在我们已经可以在项目运行后直接在地址栏里切换后缀来访问相关的页面组件了