Web前端最新vue-router（路由）详细，2024前端者未来的出路在哪里

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素

3.几个注意点

• 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹

• 通过切换，隐藏了的路由组件，默认是被销毁掉的，需要的时候在挂载

• 每个组件都有自己的$route属性，里面存储着自己的路由信息

• 整个应用只有router，可以通过组件的**$router**属性获取到

4.多级路由

1.配置路由规则，使用children配置项

routes:[

{

path:‘/about’,

component:About

},

{

path:‘/home’,

component:Home,

// 二级路由

children:[

{

//这里不用加斜

path:‘news’,

component:News,

},

{

//这里不用加斜

path:‘message’,

component:Message,

}

]

}

]

2.跳转(要写完整路径)：

也就是带上父级路径

News

5.路由的query参数

1.传递参数

• <router-link :to="{

  //你要去到哪个组件

  path:‘/home/message/detail’ ,

  query:{

  id:m.id,

  title:m.title

  }

  }">

  {{m.title}}

  2.接收参数

  $route.query.id

  $route.query.title

  6.给路由命名

  当多级路由时给上name名可以简化跳转，一级路由给不给name没有多大影响

  routes:[

  {

  //给路由命名 跳转时直接用name:命名 不用path

  name:‘nameabout’,

  path:‘/about’,

  component:About

  },

  {

  path:‘/home’,

  component:Home,

  // 二级路由

  children:[

  {

  //这里不用加斜

  path:‘news’,

  component:News,

  },

  {

  //这里不用加斜

  path:‘message’,

  component:Message,

  children:[

  {

  //多级路由给name 可以简化跳转

  name:‘namedetail’,

  path:‘detail’,

  component:Detail

  }

  ]

  }

  ]

  }

  ]

  2.简化跳转

  <router-link :to="{

  //你要去到哪个组件

  //直接使用name 不用path路径

  name:‘namedetail’ ,

  query:{

  id:m.id,

  title:m.title

  }

  }">

  {{m.title}}

  6.路由的params参数

  1.配置路由,声明接收params参数

  routes:[

  {

  name:‘nameabout’,

  path:‘/about’,

  component:About

  },

  {

  path:‘/home’,

  component:Home,

  // 二级路由

  children:[

  {

  //这里不用加斜

  path:‘news’,

  component:News,

  },

  {

  //这里不用加斜

  path:‘message’,

  component:Message,

  children:[

  {

  name:‘namedetail’,

  path:‘detail/:id/:title’, //使用占位符声明接收params参数

  component:Detail

  }

  ]

  }

  ]

  }

  ]

  2.传递参数

  {{m.title}}  

  <router-link :to="{

  //你要去到哪个组件

  name:‘namedetail’ ,

  params:{

  id:m.id,

  title:m.title

  }

  }">

  {{m.title}}

  特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

  3.接收参数

  $route.params.id

  $route.params.title

  7.路由的props配置

  作用：让路由组件更方便的收到参数

  {

  name:‘namedetail’,

  path:‘detail/:id/:title’, //使用占位符声明接收params参数

  component:Detail,

  // props的第一种写法 ，该对象中的所有key-value都会以props的形式传给Detail组件

  props:{

  a:1,

  b:‘helloworld’

  }

  // props的第二种写法：值为布尔值 Boolen 若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件

  props:true

  // props的第三种写法：值为函数

  props($route){

  return {

  id:$route.query.id,

  title:$route.query.title

  }

  }

  }

  6.缓存路由组件

  1.作用：让不展示的路由保持挂载，不被销毁

  下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

  

  进阶阶段

  进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

  JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。

  我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

  然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。

  1、JavaScript 和 ES6

  在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

  

  2、前端框架

  前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  以 Vue 为例，我整理了如下的面试题。