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插件的使用方式，使用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')

猜你喜欢