一、用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。先来看一下这种传参方法的基本语法：

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

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

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

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

最后在模板里(src/components/Hi1.vue)用$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)

五、编程是导航

前进与后退

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

跳转

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

eg: