1Vue-router集成

Posted 2022-07-22 mb60aa6722a0e94

今天我们聊一下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

// 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)