今天我们聊一下vue的全家桶成员之一Vue-router
Vue-router就是一个前端路由的功能,现在我们开发前端webapp,路由是一个必不可缺的功能,我们只做webapp相对于以前的网站来说,我们一个连接输入然后跳转到后端进行一个模板渲染,产生一个新的html,返回给浏览器端,浏览器把这个内容显示出来,这是一次路由跳转。
作为单页应用来说,我们的路由跳转是不经过后端服务器的。我们的页面渲染内容全部是基于JavaScript;
既然路由跳转是由前端去做,我们就需要一个称职合理的工具帮助我们更好的去处理前端路由。
现在来说每个前端框架都会配一个路由工具,我们的vue使用的是Vue-router;
我们在client目录下新建一个config目录,在config下新建一个router.js文件和routes.js文件目录;
为什么要这样做呢,因为在我们的项目变得更强大之后,我们的路由配置肯定会变得非常的多,
我们希望单独配置一个和路由映射关系的配置文件。
router.js这个的文件主要是router的一些配置和设置的内容。
下面我一起安装一下vue-router
npm i vue-router -S
首先我们在routes.js把路由映射的关系给列好;每个路由项都是作为一个数组去配置的,
跳转的页面,我们需要先将页面引入;
import 名字 from '../路径'
在router.js文件中我们先要将vue-router引入,同时我们也需要将routes引进来
import Router from 'vue-router'
import routes from './routes'
在index.js中将vue-router加到整个应用当中去;所以我们要在index.js中奖vue-router引入进来
import Vue from 'vue'
import VueRouter from 'vue-router'
import createRouter from './config/router'
通过vue插件的使用方式,使用VueRouter
Vue.use(VueRouter)
创建路由
const router = createRouter()
将router注入到应用里面
new Vue({
router,
render: (h) => h(App)
}).$mount('#root')
这个vue-router的一个使用方法,他会通过我们在根节点的vue实例上面,挂在了这个router对象之后,然后通过Provider或者其他的类似方式让我们在每个组件里面都可以使用这个router对象,
routes.js
router.js
index.js