今天来看看 vue 怎么实现路由功能.
我们在 vue-cil 脚手架搭建好的基础上来实现路由功能. 如果搭建完初始化项目时没有路由功能则需在 npm 安装路由. 命令:
npm install vue-router
然后在 main.js 中引用路由文件
import router from './router'
并在实例化 vue 对象是使用他
接下来我们就可以在 app.vue 中来使用路由功能. 我们通过一个简单的导航模块来看看怎么实现路由功能.
首先我们创建 header 模块来作为导航模块. 我们使用 boostrap4.0 来创建导航栏
然后我们在 app.vue 中引入 header.vue 模块 具体命令:
import Header from '@/components/Header';
然后在 components 注册 Header 组件 :
就可以直接在 app.vue 的 template 中使用 Header 组件
我们在 Header 组件下面在写一个显示路由内容:
这个代表路由跳转的内容都显示在这里:
接下来我们在 src 目录下创建一个 router 文件夹用来存放路由的地址 并创建 index.js 文件
首先需要引入 vue 和 vue-router:
- import Vue from 'vue'
- import Router from 'vue-router'
然后需要再写 Vue.use(Router) 来让 vue 使用路由组件
最后我们注册需要的每一个路由即可:
这里的 mode:history 是路由的 history 模式 让地址栏去掉 "#", 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
path 是路由的路径, name 是路由名称, component 是指显示哪一个组件. 这里的 component 根据上面引入的组件来, 需要先引入组件这里才可以用, 例如:
录入 index 组件.
路由注册好之后, 我们在导航栏的超链接里面输入我们注册的路由地址即可以在 router-view 中显示我们注册的组件内容
最终效果:
最终利用路由实现导航功能.
来源: https://www.2cto.com/kf/201809/777916.html