vue2.0路由进阶

Posted 前端++

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2.0路由进阶相关的知识,希望对你有一定的参考价值。

一、路由的模式

  第一种用history方式实现,html5使用window.history.pushState()实现路由的切换而不刷新页面。

  第二种使用hash值的方式来实现。

  vue2.0两种都可以使用只需要在配置路由时加上

  mode:‘history/mode‘    vue2.0默认为hash模式。需要切换为history模式时使用

  

  const router = new VueRouter({
  // mode:‘history‘,
  routes:routes
  })

 

  两种模式的区别:

  hash:支持所有浏览器,包括不支持HTML5的浏览器。

  history:依赖html5 history API

二、一般配置路由:

  

  <div>
    <router-link to="/home">主页</router-link>
    <router-link to="/news">新闻</router-link>
  </div>
  <div>
    <router-view></router-view>
  </div>

  //准备组件
  var Home={
  template:‘<h3>我是主页</h3>‘
  };
  const News={
  template:‘<h3>我是新闻</h3>‘
  };
  //配置路由
  const routes=[
  {path:‘/home‘,component:Home},
  {path:‘/news‘,component:News},
  {path:‘*‘,redirect:‘/home‘}
  ];
  //生成路由实例
  const router = new VueRouter({
  routes:routes
  });
  //最后挂载
  new Vue({
  router:router,
  el:‘#box‘
  })

这样有一个缺点:如果修改路由配置的路径时每一个router-link都需要改变,所以有如下优化方法:

  html中:

    <router-link :to="{name:‘Home‘}">              //有冒号,传入的为一个对象

  JS中:

    配置路由时使用

      routes:[

        {name:‘Home‘,path:‘/‘,component:Home},

      ]

    需要改变路径时只需要改变配置时的路径即可。

三、路由使用tag标签

  例如有些时候在ul中必须嵌套li要设置路由的话必须在li中再嵌套<router-link>

  eg:

           <ul>

      <li><router-link></router-link></li>  

    </ul>

  使用tag标签时即可优化:

    <ul>

      <router-link tag="li"></router-link>

    </ul>

四、动态路由

  eg:

  <router-link :to="{name:‘BookDetails‘,params:{id:1}}"></router-link>   

  在JS中使用

  const bookID = this.$router.params.id调用即可 

以上是关于vue2.0路由进阶的主要内容,如果未能解决你的问题,请参考以下文章

vue2.0路由嵌套

vue2.0-路由嵌套动态路由跳转

vue2.0-路由配置

vue2.0路由

Vue2.0学习—路由(六十五)

vue2.0 路由学习笔记