vue.router跳转补充

2018-09-27  本文已影响0人  梁萌0328

一、

    const routes = [
     {path: ' / ' ,component : Home},
    {path: ' /menu ' ,component : Menu},
    {path: ' /about ' ,component : About},

    //如果没有找到以上菜单(输入错误),跳转到主页面

    {path: ' * ' , redirect :  ' /Home '}
  ]

二、

     <router-link to = ' / '></router-link>//表示跳转 a标签
      <router-link to = ' / '  tag = ' div '></router-link>//把a标签换成div标签

三、

  <router-link  :to = ' homeLink '></router-link>//可以绑定属性值
  data (){
        return (){
                homeLink : ' / '
        }
  }

四、可以给每一个属性增加name属性进行跳转

  <router-link  :to = ' { name: ' nameLink ' } '></router-link>
  <router-link  :to = ' { name: ' aboutLink ' } '></router-link>
  <router-link  :to = ' { name: ' loginLink ' } '></router-link>

配置路由:

   const routes = [
       {path: ' / ' , name : ' nameLink ' , component : Home},
       {path: ' /menu ' , name : ' aboutLink ' , component : Menu},
       {path: ' /about ' ,  name : ' loginLink ' , component : About}
  ]
上一篇下一篇

猜你喜欢

热点阅读