美文网首页
vue.router跳转补充

vue.router跳转补充

作者: 梁萌0328 | 来源:发表于2018-09-27 20:10 被阅读0次

    一、

        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}
      ]

    相关文章

      网友评论

          本文标题:vue.router跳转补充

          本文链接:https://www.haomeiwen.com/subject/aldyoftx.html