routervue路由，详细讲解一下

目录

路由是什么

一级路由创建|||注意--要设置router-view路由出口

二级路由 children

路由懒加载--解决首页加载白屏问题

路由导航：：用来完成页面跳转

路由模式

路由传参 动态路由匹配

路由钩子

$router与$route的区别

路由重定向--redirect

404页面

---

路由是什么

路由：路径管理工具

就是可以让我们完成一个spa单页面应用，传统的页面在跳转切换的时候 会造成页面加载白屏 用户体验差 我们通过spa应用可以达到类似于原生app切换效果 切换没有白屏 丝滑切换 用户体验好

路由本质 就是根据url的不同渲染不同的组件页面

超链接切换的是一个个HTML， 使用路由技术，单页面spa应用，就是一个html

一级路由创建|||注意--要设置router-view路由出口

{
    path: '/',//url路径
    name: 'home',//给这个路由规则起个名字
    component: HomeView //引用组件
  },

二级路由 children

path: '/home',//url路径
    name: 'home',//给这个路由规则起个名字
    component: Home, //引用组件
    children:[//配置二级路由规则
      {
        path: '/era',
        name: 'era',
        component: Era 
      },]
 必须设置二级路由的路由出口   router-view  (写在对应一级路由的页面中)** **必须设置二级路由的路由出口   router-view  (写在对应一级路由的页面中)

路由懒加载--解决首页加载白屏问题

component: (resolve) => require(['你引用组件页面的路径'], resolve)
component: () => import('你引用组件页面的路径')

路由导航：：用来完成页面跳转

• 声明式导航--router-link 这个标签来完成页面之间的跳转 to属性就是你要跳转的路径-----会自动添加一个动态类名
• 编程式导航

        this.$router.push("/路径")支持回退

        this.$router.replace("/替换路径") replace是替换 不支持回退

        this.$router.go() 

路由模式

• hash
  • url带#号  上线之后刷新不会丢失 浏览器兼容性好
• history
  • url不带#号 上线之后刷新会丢失 需要后端配置服务器重定向 浏览器兼容性一般

路由传参 动态路由匹配

• 就是把数据从一个路由页面传递到另外一个路由页面中
• params
  • 在接受的路由页面规则中设置接受参数
  • 发送 使用name作为跳转地址 使用params来设置发送参数
  • 接受 this.$route.params.参数key
• query
  • 发送 使用name|path作为跳转地址 使用params来设置发送参数
  • 接受 this.$route.query.参数key
• params传递参数的时候相对安全一些 因为不显示传递的数据key 只显示value
• query方式 在传递的时候会显示数据key和val 相对来说没有parmas安全
• parmas方式 刷新会丢失 （上线之后）
• query方式 刷新不会丢失

路由钩子

在前一个文章具体讲过路由钩子 点击跳转！！

$router与$route的区别

$router代表的是 路由对象 他所涉及的范围是全部项目页面

$route代表 当前路由页面对象

路由重定向--redirect

404页面

// 重定向
  {
    path:"/",
    redirect:"/shouye"
  },
 // 404页面必须在所有规则的最下面  vue-router3x的版本使用如下方式
  {
    path: '*',
    name: 'no',
    component: No
  },

 //vue-router4x的版本使用如下方式
  {
    path: '/:catchAll(.*)',//路径
    name: 'no',//给这个规则起个名字 
    component: NoView //当匹配到这个路径的时候渲染的组件页面
	}