1、Vue-router集成

1、Vue-router集成

今天我们聊一下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插件的使用方式，使用VueRouterVue.use(VueRouter)创建路由const router = createRouter()将router注入到应用里面new Vue({  router,  render: (h) => h(App)}).$mount('#root')这个vue-router的一个使用方法，他会通过我们在根节点的vue实例上面，挂在了这个router对象之后，然后通过Provider或者其他的类似方式让我们在每个组件里面都可以使用这个router对象，

routes.js

// import Todo from '../views/todo/todo.vue'// import Login from '../views/login/login.vue'export default [ { path: '/login', component: () => import(/* webpackChunkName: "login-view" */ '../views/login/login.vue') // component: Login }]

router.js

import Router from 'vue-router'import routes from './routes'export default () => { return new Router({ routes })}

index.js

import Vue from 'vue'import VueRouter from 'vue-router'import App from './app.vue'import createRouter from './config/router'Vue.use(VueRouter)const router = createRouter()new Vue({ router, store, render: (h) => h(App)}).$mount('#root')

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。