vue-router
2021-05-16 本文已影响0人
大佬教我写程序
路由相关知识
a用户发送一条信息，经过路由，路由会根据映射表，通过电脑的Mac地址找到对应的ip，然后将信息转发出去
什么是前端渲染，，，什么是后端渲染，，，，什么是前后端分离
- 后端渲染，传统的ASP、JSP、Java渲染机制
- 前端渲染 ，使用JS来渲染也免得大部分内容，代表的是当前流行的SPA单页面富应用,优点是：局部刷新、懒加载、富交互、节约服务器成本、分离设计
-
同构渲染指前后端共用JS，首次渲染使用node.js来直出HTML
04-前端路由中url和组件的关系.jpg
01-后端路由阶段.png
02-前端后端分离阶段.png
03-SPA页面页面的阶段.png
在不刷新页面的条件下，改变URL的两种方法
image.png
HTML5的History六中改变URL而不刷新页面
- replaceState:替换原来的路径(替换路径，不能返回)
- pushState：使用新路径
- popState:路径的回退
- go:向前或向后改变路径
- forward：向前改变路径（go（1））
- back：向后改变路径（go（-1））
路由工作的大致过程
image.png
在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)
第一步：导入路由对象，并且调用 Vue.use(VueRouter)
第二步：创建路由实例，并且传入路由映射配置
第三步：在Vue实例中挂载创建的路由实例
在子组件中获取到路由配置信息地址的内容
$route.params.指的是正处在活跃状态的路径信息
<b>{{$route.params.userId}}</b>
vue-router使用步骤
- 先下载对应的脚手架（记得要下载vue-router）
- 在components文件夹创建组件文件（.vue文件）
- 配置路由映射：组件路径之间的关系（router/index.html）
- 使用路由: 通过<router-link>（自动渲染成a标签）和<router-view>(App.vue模板)
- 在main.js里面进行使用,注意一定要导出的名字是
router
import router from './router/router.js'
new Vue({
router,
render: (h) => h(App),
}).$mount('#app')
浏览器url得知路径模式 ----哈希模式转化为history模式
image.png
router-link补充
image.png
- 点击按钮的时候。会为该DOM元素增加一个类
router-link-active
可以将该类名修改
// 将路由导入到vue实例当中
export default new Router({
//配置组件和路由之间的关系
routes: routers,
mode: 'history',
//修改点击之后增加的类名
linkActiveClass: 'active'
})
懒加载
- 由于打包构建应用的时候，打包之后js文件会变得很大，如果一次性从服务器上面请求这些数据的话，会有点慢，甚至电脑上面还出现短暂的空白，所以我们要用到懒加载
- 懒加载的作用：将路由对应的组件打包成一个个对应的模块，当路由访问到其中的组建的时候，才回去加载对应的模块
- 懒加载操作
- ES6方法
const Home = () => import('../components/Home.vue') - AMD写法：
const About = resolve => require(['../components/About.vue'], resolve); - 结合Vue的异步组件和Webpack的代码分析：
const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};
打包之后是：
image.png
打包之后的文件命名问题
const routes = [{ path: "/", redirect: "/home" },
{
path: "/home",
component: () =>
import ( /*webpackChunkName:"home-chunk"*/ "../package/Home.vue")
},
{
path: "/about",
component: () =>
import ( /*webpackChunkName:"about-chunk"*/ "../package/About.vue")
}
];
image.png
- 错误页面
设置，最后有*号表示会把路径按照‘/'划分成数组
{
path: "/:pathMatch(.*)*",
component: () =>
import ( /*webpackChunkName:"about-chunk"*/ "../package/NotFound.vue")
}
使用
<p>{{$route.params.pathMatch}}</p>
路由嵌套
image.png
- 实现方法
- 先写出两个组件文件
- 将其导入到路由配置文件当中进行配置
{
//父组件
path: '/home',
component: Home,
//定义子路由
children: [{
//默认进入的路径
path: '',
redirect: 'message'
}, {
path: 'message',
component: Message
}, {
path: 'news',
component: News
}]
}
- 在父组件当中展示
<template>
<div>
<p>我是首页组件</p>
<router-link to="/home/news">新闻</router-link>
<router-link to="/home/message">消息</router-link>
<router-view></router-view>
</div>
</template>
传递参数
- 先生成一个组件
- 在路由配置文件中进行配置
- 将其展示出来，并配置路径
？query(通过&进行拼接)
<router-link :to="{path:'/info',query:{name:'guo',age:18,hight:188}}" tag="button">关于</router-link>
$route和$router的区别
- $route,在子组件中使用，获取到的是正处于活跃状态的vue组件的路由配置信息
<p>{{$route.query}}</p>
-
router方法：
可以传入一个对象
image.png
image.png
- $router为VueRouter实例，可以要导航到不同URL
homeClick(){
this.$router.push('/home')
console.log('homeclick');
}
image.png
在setup（）获取route和router的方法
image.png
变量是自定义的
router-link的v-slot
image.png
router-view的slot
动态添加路由
image.png
删除路由
image.png
导航守卫
vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发
- 类似的钩子函数还有create（），当初始化一个vue实例的时候，自动调用该函数
- 参数解析导航钩子的三个参数解析:
to: 即将要进入的目标的路由对象.
from: 当前导航即将要离开的路由对象.
next: 调用该方法后, 才能进入下一个钩子. -
路由对象
image.png
- to：即将进入的路由Route对象；
- from：即将离开的路由Route对象；
- next不常用
//router是vue的实例
router.beforeEach((to, from, next) => {
console.log(to);
//matched[0]表示路由嵌套的父路由
console.log(to.matched[0].meta.title);
document.title = to.matched[0].meta.title
//表示继续执行下一步
next()
})
返回值
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染
<keep-alive exclude="message,User">
<!-- exclude属性里面包含的是组建的name属性，且之间不能有空格，表示的是，只要里面包含的组件都不会背缓存 -->
<router-view></router-view>
</keep-alive>
