likes
comments
collection
share

仿网易云音乐笔记之router-link和router-view的区别

作者站长头像
站长
· 阅读数 34

写在前面 前一阶段断断续续地可算整理完了css常用的知识，于是打算用vue3仿网易云写一下页面布局，里面js暂未实现，等后续js整理完成之后，实现一个类似于网易云音乐的pc版。到时候我会把源码放到github上。等到文章记录完成之后，我会在最后把github源码链接发出来，敬请期待哦！

这篇文章记录一下我在实现过程中经常疑惑的一个问题：router-link和router-view的使用以及区别

历史发展

在vue等这类框架出现之前，对于导航页面的跳转我们经常使用的有以下几种方式： 跳转新页面：

  1. 使用a标签跳转到新页面

    这种方式在使用_blank打开新页面的时候会出现安全问题，新页面中可以使用window.opener来控制原始页面。如果新老页面同域，那么在新页面中可以任意操作原始页面。如果是不同域，新页面中依然可以通过window.opener.location，访问到原始页面的location对象。

    <a href="newPage.html" target="_blank" rel="noopener norefferrer" >

  2. 使用window.location.href去跳转

    这种方式在某些场景下可能存在跨站点脚本攻击(XSS问题) 页面内跳转

  3. 使用iframe实现页面内新页面的跳转。

    会存在很多缺点：

    • 页面嵌套页面，样式不好看，可能存在很多滚动条
    • 代码复杂，不容易被搜索引擎索引到，不利于SEO
    • iframe框架页面会增加服务器的http请求，对于大型网站是不可取的
    • iframe会阻塞主页面的Onload事件
    • iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载

  4. 将内容全部写在一个页面内，根据点击菜单显示对应的页面内容

    这种方式会导致页面代码很复杂，不利于维护，而且所有的代码都是根据display：none来控制是否显示，会增加页面渲染压力。

router-link和router-view

router-link和router-view是vue.js推出的针对路由跳转和显示。router-link支持history和hash两种模式。而且可以使用路由守卫来控制路由的跳转，返回不同的响应效果。

router-link是用来跳转的标签，相当于是a标签，而router-view是用来承接页面的标签，用于展示router-link页面的内容。

router-link的用法

请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。

在vue中，我们想要实现路由的跳转有两种方式，一种是声明式router-link，一种是编程式this.$router.push。如果项目中用到了router-view, 那么这两种方式都可以将通过路由跳转的页面显示在router-view里面。

基本语法
<router-link to="/home"></router-link>

to属性值为路由，这样点击router-link这个标签的内容的时候就能跳到对应的页面

router-link路由如何传参

上面介绍的基本用法是最基础的跳转页面，如果想要通过路由给页面传参，应该如何传参呢，在编程式路由跳转this.$router.push中有以下几种方式：

  1. 直接在路由的url后面拼接参数 这种方式需要在路由配置中写明url后面是会携带参数的
  {
    path: '/detail/:id',
    component: Detail
  }

页面接收参数的方式：this.$route.params.id

  1. 使用params传参
this.$router.push(
  {
    path: '/detail',
    params: {
      id: 1
    }
  }
)

页面接收参数的方式：this.$route.params.id

  1. 使用query传参
this.$router.push(
  {
    path: '/detail',
    query: {
      id: 1
    }
  }
)

页面接收参数的方式：this.$route.query.id

对于声明式router-link来说，也具有上述这些传参的方式：

  1. 直接在路由的url后面拼接参数 这种方式需要在路由配置中写明url后面是会携带参数的
  {
    path: '/detail/:id',
    component: Detail
  }
  <router-link to="/detail/1"></router-link>

页面接收参数的方式：this.$route.params.id

  1. 使用params传参
<router-link :to="{ path: '/detail', params: {id: 1}}"></router-link>

页面接收参数的方式：this.$route.params.id

  1. 使用query传参
<router-link :to="{ path: '/detail', query: {id: 1}}"></router-link>

页面接收参数的方式：this.$route.query.id

router-view的用法

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

也就是说，router-view标签就是来占位我们要显示的内容的位置。

<router-view></router-view>

可能会遇到的坑

  1. App.vue里面有个router-view，主页面里面也有个router-view，router-link跳转过来的页面出现在App.vue里面的router-view里面, 而不是主页面的router-view里面。 原因：需要跳转的路由页面是在app的路由里面，所有显示的时候是会显示在App.vue里面的router-view里，要想让某个页面展示在某个页面的router-view里面，那么不仅是router-view要写在合适的位置，而且路由也在写在对应的页面路由的children中。

以下routes.js是放置路由信息的文件，在主页中有个导航栏，想要展示子组件发现音乐页面的内容

// 初始写法不生效: 页面跳到app.vue中的router-view中了
export default [{
  path: '/',
  redirect: '/index'
}, {
  path: '/index',
  name: '主页',
  component: Index
}, {
  path: '/find',
  name: '发现音乐',
  component: FindMusic
}]
// 换成下面这种写法就跳转成功了，页面跳到对应页面的router-view中了
export default [{
  path: '/',
  redirect: '/index'
}, {
  path: '/index',
  name: '主页',
  component: Index,
  children: [
    {
      path: 'find',
      name: '发现音乐',
      component: FindMusic
    }
  ]
}]

小结：以上就是我关于router-link和router-view的理解，后续我会整理一篇关于vue中路由的文章，敬请期待哦

转载自:https://juejin.cn/post/7144275203055419406
评论
请登录