js路由在php上面使用,Vue.js路由器的使用方法总结（附代码）

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

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

改变 标签默认显示标签

标签默认显示 Dom 为 主页

通过 tag 属性可以改变 如：主页

动态绑定 地址

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

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

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'});

}

}

}

相关推荐：