必背-11.vue-router
什么是vue-router
多页面/单页面
前端路由有哪些？
- 前端路由(vue-router/react-router-dom)
- 实现SPA(single page application)：单页面应用
- 一个项目只有一个页面，我们基于路由，控制页面展示不同的代码片段(或组件)，当展示内容改变的时候，页面并不会刷新
- MPA(multi page application):多页面应用
- 一个项目有很多页面，我们做的是页面之间的跳转【每一次跳转都是打开新的页面(相当于页面刷新了)】
单页面应用和多页面应用的项目？
- 单页面应用的项目：
- 移动端大部分都是(追求原生App的操作体验)
- PC端管理系统。。。
- 多页面应用的项目：
基于JS动态绑定的内容(vue框架都是这样处理)在页面的源代码中是看不到内容的，不利于SEO搜索引擎优化！想做SEO优化，需要服务器渲染(前后端不分离、现在主流的服务器渲染SSR:nide+vue(nuxt.js)+react(next.js))
- 现在流行的模式：首屏服务器渲染[骨架屏]，其余屏幕还是交给客户端渲染
前端路由模式
- vue脚手架基于
webpack-dev-server启动的服务(开发环境)、已经完成了"服务器应该对history模式的支持"的相关操作；但是打包部署到服务器上(生产环境)，没有webpack-dev-server,需要服务器的支持(有指定的页面)
vue-router使用
-
第一步：安装：$npm i vue-router -
第二步：建立路由规则表:创建路由存放的路径以及index.js 和routes.js文件：
-
import Vue from "vue";
import VueRouter from "vue-router"
import routes from './routes'
Vue.use(VueRouter)
let router=new VueRouter({
mode:"hash",
routes
});
export default router;
-
import Home from '@/pages/Home.vue'
import Analyse from '@/pages/Analyse.vue'
import HomeRoutes from "@/router/homeRoutes"
const routes=[{
path:"/",
component:Home
},{
path:"/analyse",
component:Analyse,
children:HomeRoutes
},{
path:'*',
redirect:'/'
}]
export default routes
-
第三步：将router实例添加为全局Vue实例的私有属性
-
第四步：实现路由跳转(改变url地址或者哈希值)
-
第五步：设置一个容器，可以在指定的位置，把基于路由规则匹配的组件进行渲染
- 以上的
<router-view></router-view>就是我们制定的位置
router-link
-
router-link 内置组件(路由跳转/路由切换) -
实现页面跳转：点击实现路由跳转，基于“to”属性指定跳转地址
-
页面渲染的时候，会把router-link渲染为a标签 -
页面刷新或路由切换：都会拿最新的地址(或哈希值)与每一个router-link中to属性的值(或者path属性值)进行匹配；完全“精准”匹配的会给A标签设置：router-link-exact-active router-link-acive两个样式名；非精准匹配的只设置：router-link-active这个样式类，一点都没匹配的，啥样式都不设置！！=>我们后期可以基于这个特点，给当前匹配的导航设置选中特殊样式
精准匹配/非精准匹配/完全不匹配：
页面地址:/order
to的地址：
/ 非精准匹配 (包含一个完整的)
/ : 任何地址都包含一个完整的斜杠
/home2 VS /home 不算
/home/list VS /home 算
/analyse 完全不匹配
/order 精准匹配(一毛一样)
?
router-view
二级路由
-
二级路由可以直接在一级路由表中配置，但这样会显得代码嵌套层数太多，我们可以将二级路由抽出来，放在一个js文件中，再进行导入引用： -
import Home from '@/pages/Home.vue'
import HomeRoutes from "@/router/homeRoutes"
const routes=[{
path:"/",
redirect:"/home"
},{
path:"/home",
component:Home,
children:HomeRoutes
},]
-
二级路由homeRoutes.js文件的写法：
-
二级路由也是路由表的形式，只是里面的路径：
- 如果不以斜杠开头，则表示拼接到父级路由后面
- 如果以斜杠开头，则表示井号#后面的全部路径，不会拼接父路由路径
-
const homeRoutes=[
{
path:"",
redirect:'/home/customerlist'
},
{
path:"customerlist",
component:()=>import("@/pages/home/CustomerList.vue")
},
{
path:"/home/customeradd",
component:()=>import("@/pages/home/CustomerAdd.vue")
},
{
path:"visitList",
component:()=>import("@/pages/home/VisitList.vue")
}
];
export default homeRoutes;
路由懒加载
按组件打包js，按需导入
- 问题：我们每通过
import (/* webpackChunkName: 'analyse'的形式使组件路由懒加载，都会形成一个单独的js文件，这样就会导致项目中js文件很多。 - 解决：
component:()=>import (/* webpackChunkName: 'analyse' */"@/pages/Analyse.vue"),
- 在import内，最前面加上一句
/* webpackChunkName: 'analyse'*/这样，它以及它子孙组件就会打包成一个js组件，实现了按包分割的功效，减少了js文件数量
|