vue项目1-pizza点餐系统3-路由知识点补充-CSDN博客

1、可以通过tag修改router-link的默认标签

<!--router-link标签默认是a标签，tag标签可以修改默认标签 --> 
<li><router-link tag="div" to="/" class="nav-link">主页</router-link></li>

2、to可以绑定动态路由地址

 <!-- to可以绑定动态路由地址--> 
 <li><router-link :to="homeLink" class="nav-link">主页</router-link></li>

3、地址输入错误，跳转主页

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

}

4、to可以绑定路由名

<!-- 利用路由名绑定 -->
<!-- <li><router-link :to="{name:'homeLink'}" class="nav-link">主页</router-link></li> -->

5、通过button跳转页面

<template>
     <div>
         <h1>home</h1>
         <button @click="gotoMenu" class="btn btn-success">跳转</button>
     </div>
 </template>

 <script>
 export default {
     methods:{
        gotoMenu(){
            //指定跳转到上次浏览的页面
            //this.$router.go(-1)

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

            //指定跳转路由的名字下
            //this.$router.replace({name:'menuLink'})

            //通过push进行跳转，push可以传更多的参数
            //this.$router.replace('/menu')
            this.$router.push({name:'menuLink'})
        }
     }
 }
 </script>

转载于:https://www.cnblogs.com/JimShi/p/11170232.html