路由：
先说下前端路由和后端路由。
后端中，采用的是后端渲染模式，就是在他的router中接收到了哪一项就会去寻找当前项对应的controller层，去渲染相应的界面。这个过程要经过http请求
前端路由的使用是接收不同的路由，然后匹配当前路由对应的组件。前端路由的使用可以构建单页面，就是匹配不同的路由去显示不同的组件，不用经http请求，也不用重新加载资源，大大减少了服务区的压力。
这里我们使用脚手架快速搭建项目：
使用命令vue/cli3的方法： vue create myproject npm i npm run serve
创建项目，下载项目依赖的包，运行服务。
其中components中放的是一些组件，view中放的是页面中展示的视图，main,js是主要的入口文件，在这里渲染页面。App.vue是主页面，router.js是一个单独出来写路由的页面
路由界面，首先引入vue以及vue-router,然后加载Router。接着下面配置相应的路由规则
接着在App中写对应的路由跳转，以及存放组件的router-view。tag的作用是将router-link中的元素渲染成相应的标签，默认是a标签。点击选中标签时会有一个对应的class,router-link-active,所以如果想给选中的元素添加相应的样式，那么可以给这个class添加相应的样式。还可以通过自定义class,来改变router-link-active linkActiveclass:;active，这样就能将选中的class变为active
通过脚本跳转
比如点击某个地方的时候，进行跳转，可以使用$router.push()
懒加载
懒加载是一个能大大节省服务器开销的方法，打包文件的时候，会把js的模块分开打包，app是写主要的业务逻辑代码，main是底层支撑的代码，vendor是运营商的代码。分离开来提高了效率。
代码中有多少个组件就会打包成多少个js文件，有三个公共的js文件，分别就是上边的三个文件
懒加载的使用可以在没有调用这个路由的时候就不用去加载这个js文件，从而大大节省了加载js的时间。
正常加载
懒加载是在使用的时候采取引入这个路径，不会先引入这个组件，然后调用的时候再去调用这个组件。
component:()=>import('./views/login')
子路由
子路由就是在路由的嵌套。路由里有 path,name，components属性，还有一个children属性，该属性用来存放他的子路由相应的规则。子路由的书写规则和路由的规则一样。
重定向
重定向就是在点击某个链接跳转到某个路由匹配的规则，重定向就是在进入到这个路由中时，跳转到另外一个路由，显示相应的组件。如上图中的redirect。也可以在点击进入某一页的时候做默认显示
hash,history
我们知道，跳转到另外一台个页面有两种方法，hash,history.使用hash的时候，路径的后边会有一个/#，这样不太符合用户体验，使用history模式会消除掉这个符号。
mode:history
默认的路由跳转是栈的相应操作，进入新的路由的时候就是进栈，返回就是出栈的操作
pushStack,
replace是替换掉当前的路由，使用repalce不会有返回键
动态路由就是
我们知道请求头上的内容肯定不是不变的，那如果请求头地址一致改变，路由就要一致更改，会很麻烦，这是有一个解决的方法就是动态路由，就是将路由设置成动态的，更改的时候只需要在脚本中改变，而无需在内容中改变，如下：
用v-bind绑定路径，将字符串拼接成路径，接收的时候也是使用动态接收
此时我们要是想接收请求的内容，比如请求的id,name等，这时可以使用$route,匹配当前正在在使用的路由，并通过params.uId将他的参数获取到。可以通过计算属性，得到结果在内容中直接用插值表达式，也可以直接在插值表达式中直接调用，因为是router的实例，因此直接调用的时候不用写this.
\
0人点赞
网友评论