首页 >web前端 >js教程 >Vue.js路由器的使用方法总结(附代码)

Vue.js路由器的使用方法总结(附代码)

不言
不言原创
2018-08-23 16:21:131672浏览

本篇文章给大家带来的内容是关于Vue.js路由器的使用方法总结(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

b988a8fd72e5e0e42afffd18f951b277 是用于 路由器的无刷新跳转

改变b988a8fd72e5e0e42afffd18f951b277 标签默认显示标签

b988a8fd72e5e0e42afffd18f951b277 标签默认显示 Dom 为 3499910bf9dac5ae3c52d5ede7383485

<router-link to="/" class="nav-link">主页</router-link>

通过 tag 属性可以改变 如:

<router-link to="/" tag="p" class="nav-link">主页</router-link>

b988a8fd72e5e0e42afffd18f951b277动态绑定 地址

给 b988a8fd72e5e0e42afffd18f951b277 的属性 to 前加一个 冒号,再为其附上变量

下面的代码可以看出,to 的值是可以 随 homelink 变化,也就是说,我们可以通过自己设定的逻辑来影响 homelink 的值,以此改变 b988a8fd72e5e0e42afffd18f951b277 跳转方向

<router-link :to="homelink" tag="p" class="nav-link">主页</router-link>



 export default {
      data(){
        return{
          homelink:&#39;/&#39;
        }
      },
        name: "Header"
    }

 输入地址输入错误处理

当用户输入 url 地址错误时,自动跳转到设定地址
在main.js 文件下的 路由器 配置项内加入

{path:&#39;*&#39;,redirect:&#39;/&#39;}
const router= new VueRouter({
  routes:[
    {path:'/',component:Home},
    {path:'/menu',component:Menu},
    {path:'/admin',component:Admin},
    {path:'/about',component:About},
    {path:'/login',component:Login},
    {path:'/register',component:Register},
    {path:&#39;*&#39;,redirect:&#39;/&#39;}                  //错误跳转处理  ,将跳转到 Home 组件
  ],
  mode:"history"
});

输入不存在的地址,页面会跳转到 Home 组件

路由 name 属性

在配置 路由时,为其赋予 name 属性,在b988a8fd72e5e0e42afffd18f951b277 中可作为地址

//main.js
const router= new VueRouter({
  routes:[
    {path:'/',name:'home',component:Home},        name属性为 home
    {path:'/menu',name:'menu',component:Menu},
    {path:'/admin',name:'admin',component:Admin},
    {path:'/about',name:'about',component:About},
    {path:'/login',name:'login',component:Login},
    {path:'/register',name:'register',component:Register},
    {path:&#39;*&#39;,redirect:&#39;/&#39;}
  ],
  mode:"history"
});

利用name属性指定 路由地址(to前面记得加 :号)
 

        <ul class="navbar-nav">
          <li><router-link :to="{name:&#39;home&#39;}" class="nav-link">主页</router-link></li>
          <li><router-link :to="{name:&#39;menu&#39;}" class="nav-link">菜单</router-link></li>
          <li><router-link to="admin" class="nav-link">管理</router-link></li>
          <li><router-link to="about" class="nav-link">关于我们</router-link></li>
        </ul>

路由跳转方法

//html
<button @click="goToMenu" class="btn btn-success">Let`s order</button>

//js
 export default {
        name: "Home",
        methods:{
          goToMenu(){
            //跳转到上一次浏览的页面
            this.$router.go(-1);

            //指定跳转的地址
            this.$router.replace(&#39;/menu&#39;)

            //指定跳转路由的名字下(路由name值)
            this.$router.replace({name:&#39;menu&#39;});

            //通过 push 进行跳转(最常用)
            this.$router.push(&#39;/menu&#39;);
            this.$router.push({name:&#39;menu&#39;});
          }
        }
    }

 相关推荐:

vue.js中路由器的配置方法介绍

Vue.js搭建报错如何解决?

以上是Vue.js路由器的使用方法总结(附代码)的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn