vue2.0--vue-router路由

Posted 2020-10-22 carrie_zhao

一、vue-router如何进行参数传递

　　1、name  $route.name

　　通过在路由router/index.js中配置路由时定义的name属性来传递

　　① 有一个页面components/hello.vue，在router/index.js中进行如下的配置：

//先引入
import Hello from ‘@/components/hello‘

{
  path: ‘/‘,
  name: ‘hello‘,
  component: Hello      
}

　　② 在App.vue中获取name参数

{{ $route.name }}

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

　　① 在App.vue中有一个导航，代码如下：

<p>导航：
    <router-link to="/">首页</router-link>
    <router-link :to="{name:‘hi‘,params:{username:‘vue‘}}">hi页面</router-link>
</p>

　　需要注意的是用来传参的to是被绑定的，也就是:to

　　② 此时需要配置router/index.js，并在hi.vue中接收传进来的参数

// router/index.js配置
import Hi from ‘@/components/hi‘

{
  path:‘/hi‘,
  name:‘hi‘,
  component:Hi
}

// hi.vue中
{{ $route.name }} {{ $route.params.username }}