Vue之路由解析

vue之路由

今天来看看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中显示我们注册的组件内容

最终效果：

最终利用路由实现导航功能。