一、用name传递参数

两步完成用name传值并显示在模板里：

  1. 在路由文件src/router/index.js里配置name属性。
    1
    2
    3
    4
    5
    6
    7
    routes : [
         {
           path : '/' ,
           name : 'Hello' ,
           component : Hello
         }
    ]
  2. 模板里(src/App.vue)用$router.name的形势接收，比如直接在模板中显示：
    1
    <p> {{ $router.name}} </p>

二、通过<router-link> 标签中的to传参

也许你也会觉的上边的传参很不正规，也不方便，其实我们多数传参是不用name进行传参的，我们用<router-link>标签中的to属性进行传参，需要您注意的是这里的to要进行一个绑定，写成:to。先来看一下这种传参方法的基本语法：

1
<router-link : to = "{name:xxx,params:{key:value}}" > valueString </router-link>

这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.

  • name：就是我们在路由配置文件中起的name值。
  • params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。

了解基本的语法后，我们改造一下我们的src/App.vue里的<router-link>标签,我们把hi1页面的<router-link>进行修改。

1
<router-link : to = "{name:'hi1',params:{username:'jspang'}}" > Hi页面1 </router-link>

把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.

1
{ path : '/hi1' , name : 'hi1' , component : Hi1 } ,

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

1
{ { $ route . params . username } }

三:冒号的形式传递参数

  1. 在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。
    1
    2
    3
    4
    {
         path : '/params/:newsId/:newsTitle' ,
         component : Params
    }

    我们需要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值。
  2. 在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <template>
         <div>
             <h2> {{ msg }} </h2>
             <p> 新闻ID：{{ $route.params.newsId}} </p>
             <p> 新闻标题：{{ $route.params.newsTitle}} </p>
         </div>
    </template>
     
    <script>
    export default {
       name : 'params' ,
       data ( ) {
         return {
           msg : 'params page'
         }
       }
    }
    </script>
  3. 在App.vue文件里加入我们的<router-view>标签。这时候我们可以直接利用url传值了。
    1
    <router-link to = "/params/198/jspang website is very good" > params </router-link> |


四、传统路由跳转(要解析vue变量:to)

2
3
4
5
6
<p> 导航 ：
       <router-link to = "/" > 首页 </router-link> |
       <router-link to = "/hi" > Hi页面 </router-link> |
       <router-link to = "/hi/hi1" > -Hi页面1 </router-link> |
       <router-link to = "/hi/hi2" > -Hi页面2 </router-link>
</p>

五、编程是导航

前进与后退

this.$router.go(-1) 和 this.$router.go(1)

跳转

this.$router.push('/xxx ')

eg:

<button @ click = "goHome" > 回到首页 </button>

<button @ click = "goback" > 后退 </button>
3
4
5
6
7
8
9
10
11
export default {
   name : 'app' ,
   methods : {
     goback ( ) {
       this . $ router . go ( - 1 ) ;
     } ,
     goHome ( ) {
       this . $ router . push ( '/' ) ;
     }
   }
}





<button @ click = "goback" > 后退 </button>
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue