郑州网站建设,郑州网站制作,郑州做网站,巩义网站建设,荥阳网站建设,偃师网站制作-全栈网络

网站制作中vue-router进行name路由绑定及跳转方法
当前位置:首页 > 建站技巧 > 网站代码 >

网站制作中vue-router进行name路由绑定及跳转方法

时间: 2019-01-12 分类: 网站代码 浏览次数:

在网站制作,项目开发中,使用vue进行 vue-router 路由设置及绑定中,经常会用到路由的name属性绑定设置,那么具体是如何使用你的呢? 一.使用name进行vue-router路由绑定 1.在vue-router中...

在网站制作,项目开发中,使用vue进行vue-router路由设置及绑定中,经常会用到路由的name属性绑定设置,那么具体是如何使用你的呢?
网站制作中vue-router进行name路由绑定及跳转方法

一.使用name进行vue-router路由绑定
1.在vue-router中to路由没有进行name绑定时:
在vue中,在一个路由写法规则中,我们使用to来进行路由绑定,一般写法如下:
<router-link to="about">关于网站制作</router-link>
而在router文件中,我们的vue路由写法如下:
import about from “@/components/about”
routes:  [{path: '/about',component: about}],


2.在vue-router中to路由使用name进行绑定时:
在具体的组件页面中,我们可以改造router-link中 to的写法,代码如下:
<router-link :to="{name:'aboutLink'}">关于网站制作</router-link>
而在vue跳转路由界面写法如下:
routes:  [{path: '/about',name: 'aboutLink',component: about}],

二.路由跳转到上一个浏览的页面,代码如下:
<button @click="goToMenu">点击跳转</button>
<script>
export default{
  methods:{
     goToMenu(){
          this.$router.go -1
     }
  }
}
</script>

三.指定路由跳转到指定的网站中某个页面

<script>
export default{
  methods:{
     goToMenu(){
          this.$router.replace("/index")
     }
  }
}
</script>

四.指定路由跳转到指定的网站中name名字绑定的页面
<script>
export default{
  methods:{
     goToMenu(){
          this.$router.replace({name:"aboutLink"})
     }
  }
}
</script>

五.通过push进行路由跳转
<script>
export default{
  methods:{
     goToMenu(){
          this.$router.push("aboutLink")
          this.$router.push({name:"aboutLink"})
     }
  }
}
</script>

以上就是关于在网站制作中,vue-router使用中如何对路由进行name绑定及路由跳转问题,大家可以简单参考一下。

本文关键词: vue-router 未经允许不得转载:郑州网站建设|郑州网站制作|荥阳网站建设|巩义网站建设|网站优化-全栈网络



Copyright © 2017-2020 版权所有:全栈网络工作室 备案号:豫ICP备17039206号-1 HTML网站地图
郑州网站建设|郑州网站制作|郑州做网站|巩义网站制作|荥阳做网站|偃师网站制作-全栈网络