深入理解vue?cli4路由配置-mile米乐体育

深入理解vue?cli4路由配置

目录

前言-vue路由

vue-router是vue官方的路由插件,与vue.js深度集成.

在使用了vue-router的单页面应用中,url的改变会引起组件的切换,从而达到页面切换的效果,所以如何让url按照我们的意愿去改变和url改变后页面去向何处是配置vue-router的两大问题.

[spa网页]前端渲染使得单页面富应用的spa页面得以实现,整个网页只有一个html页面,静态资源服务器里只有一套html & css,甚至只有一套js.

[富应用] 得以实现依赖于发送至服务端的一个新的请求url从服务器中获取到资源后,前端路由会负责分配资源给页面的相应组件;

[单页面] 的实现需要url在前端改变,前端路由出现后,前端路由会根据router的监听,从映射关系里找到需要改变的部分,抽取分配新的资源,并仅仅重新渲染需要改变的部分;

一、最基本路由配置

首先得安装vue-router,怎么装就不说了…

在我们安装vue-router成功后,项目文件的src内会出现一个"router"文件夹,这个文件夹内会有一个index.js,对router的配置就主要在这里完成了.

打开它,然后在 routes 数组中进行配置,一个页面的路由在这个数组里被集合为一个对象,其内部包括path和component等属性,对应着url怎么样改变会做出怎样的反应;

1.配置router/index.js

 //这是在router/index.js,全部; import { createrouter, createwebhistory } from 'vue-router' import home from '../views/home.vue'  const routes = [    //在此处配置路由; ] //在router4中使用createrouter替代了new vuerouter; const router = createrouter({    history: createwebhistory(process.env.base_url),   routes   //在此处引入所有页面的路由配置数组routes; })  export default router    //导出包含着所有路由配置的router对象, //在main.js中注入后供全局使用; 

component属性:值为一个页面,这个页面控件需要提前引入.

path属性:规定url内出现什么时跳转到component属性对应的页面.

 //这是在router/index.js,末尾部分略去; import { createrouter, createwebhistory } from 'vue-router' import home from '../views/home.vue' import about from '../views/about.vue' import news from '../views/news.vue' //引入3个页面控件; const routes = [     {         path: '/',  /* 规定初始url对应的页面 */         name: 'home',         component: home   /* 规定默认在home页面 */    },    {         path: '/about',/* 规定url新增段为/about时跳转 */         name: 'about',         component: about  /* 跳转至about */    },    {         path: '/news', /* 规定url新增段为/news时跳转 */         name: "news",         component: news  /* 跳转至news */    }, ] 

2.配置app.vue

前面规定好了url改变为不同字符时会怎样进行跳转,现在得想想怎么才能让url改变了,以我们的方式改变.

因为只有app.vue会被render渲染,大家一开始看到的和仅仅能操作的都只有app.vue,所以我们对url改变方式的规定只能在这里进行.

认识两种新的标签,他们已经在全局被注册过了.

   xxx   //会被渲染成为