今天来看看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中显示我们注册的组件内容
最终效果：
最终利用路由实现导航功能。
如对本文有疑问， 点击进行留言回复！！
我要评论
网友评论