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

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

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

改变 标签默认显示标签

标签默认显示 Dom 为

主页

立即学习“前端免费学习笔记（深入）”；

通过 tag 属性可以改变 如：

主页

动态绑定 地址

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

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

MovingBoxes实现汽车图片展示

MovingBoxes实现汽车图片展示，键盘方向键（ ← → ）也可以操作左右切换，兼容主流浏览器。 使用方法： 1. head区域引用文件 lrtk.css，jquery.js，jquery.movingboxes.js 2. head区域引用插件设置代码 3. 在你的文件中加入区域代码

下载

主页



 export default {
      data(){
        return{
          homelink:'/'
        }
      },
        name: "Header"
    }

 输入地址输入错误处理

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

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

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:'*',redirect:'/'}                  //错误跳转处理  ，将跳转到 Home 组件
  ],
  mode:"history"
});

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

路由 name 属性

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

//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:'*',redirect:'/'}
  ],
  mode:"history"
});

利用name属性指定 路由地址（to前面记得加 ：号）
 

        

          
主页
          
菜单
          
管理
          
关于我们
        

路由跳转方法

//html
Let`s order

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

            //指定跳转的地址
            this.$router.replace('/menu')

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

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

 相关推荐：

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

Vue.js搭建路由报错如何解决？