vue-router的使用

如何参数传递

方法一（不常有）、使用name传递参数。两步完成用name传值并显示在模板中

第一步：在路由文件中src/router/index.js里配置name的属性

routers:[
  {
     path:'/',
     name:'Hello',
     component:Hello
   }   
]

第二步，模板里(src/App.vue)用 $route.name 来接收参数，比如直接在模板中展示

<p>{{ $route.name }}</p>

方法二：使用<router-link :to="{name:'xxx',params:{key:value}}"></router-link>

首先在App.vue中设置模板

<router-link :to="{name:'child1',params:{username:'zwt',id:'1008'}}">child1</router-link> //一定要注意这里的name值就是路由中设置的name值，名字一定要一样

在child1.vue中接收参数：

<p>{{ $route.params.username }}</p>
<p>{{ $route.params.id }}</p>

 name的用途：一种使传参。一种作用是传参时起到名称的作用。

单页面多路由的操作

实际需求就是这样的，在一个页面里我们有2个以上的<router-view>区域，我们通过配置路由的js文件，来操作这些区域的内容。比如我们在App.vue里加上两个<router-view>标签。我们用vue-cli建立的新项目，并打开了src目录下的App.vue文件，在<router-view>先新写了两行<router-view>标签，并加入一些css样式。

<router-view name="left" style="float:left;widht:50%;background-color:#ccc"></router-view>
<router-view name="right" style="float:right;width:50%;background-color:#c0c;"></router-view>

现在在App.vue中有3个<router-view>标签了，也就是我们需要在路由配置这三个区域，配置主要是在components字段里进行

import Vue from 'vue'
import Router from 'vue-router
import Hello from '@/components/hello'
import Hi1 from '@/components/hi1'
import Hi2 from '@/components/hi2'

Vue.use(Router)

export default new Router({
       mode:'history',
       routes:[
           {
               path:'/',
               components:{
                        default:Hello,
                        left:Hi1,
                        right:Hi2    //注意这里的left、right是App.vue中的router-view中定义的name属性值  
              }
           },
           {
                   path:'/hi',
                   components:{
                        default:Hello,
                        left:Hi2,
                        right:Hi1
                   }
            }
       ]
})
                                        

上边的代码我们编写了两个路径，一个是默认的路径'/'另一个是'/hi'这两个路径下的components里面，我们对三个区域都定义了显示内容。定义好后，我们需要在components文件夹下，新建Hi1.vue和Hi2.vue页面就可以了。

Hi1.vue

<template>
   <div>{{msg}}</div>  
</template>
<script>
    export default{
        name:'hi1',
        data(){
                 return {
                        msg:'I am hi1!'
                     }
        }
    } 
</script>

Hi2.vue

<template>
    <div>{{msg}}</div>
</template>
<script>
    export default{
          name:'hi2',
         data(){
            return{
               msg:'I am hi2'
           }
          }
    }
</script>

最后，在App.vue中配置我们的<router-link>

<router-link to='/'>首页</router-link>

<router-link to='/hi'>Hi页面</router-link>

vue-router使用url传递参数

一、使用:冒号的形式传递参数。我们可以在配置路由文件里的path属性值以冒号:的形式传递参数。这就是对参数的绑定。

{
    path:'/params/:newsId/:newsTitle',
    component:Params
}

我们需要传递的参数是新闻ID(newsId)和新闻标题(newsTitle)，所以我们在路由配置文件里制定了这个两个值

在src/components目录下建立了我们的params.vue组件。也可以说是页面。我们在页面里输出了url传递的新闻Id和新闻标题

<template>
    <div>
          <p>这里是通过url传递参数，此页面通过$route.params.newsId来接收参数</p>
          <p>newsId:{{ $route.params.newsId }} </p>
          <p>newsTitle:{{ $route.params.newsTitle }}</p>
    </div>
</template>
<script>
     export default{
        name:'params',
        data(){
             return{

              }
         }
     }    
</script>

在App.vue文件中加入我们的router-link标签。这时候可以直接通过url传值了

<router-link to="/params/123/helloworld">params</router-link>

正则表达式在URL传值中的应用

如果我们希望传递的新闻ID只能是数字的形式，这时候我们就需要在传递时有个基本的基本的类型判断。vue是支持正则的

加入正则需要在路由配置文件里(src/router/index.js)以圆括号的形式加入

path:'/params/:newsId(\\d+)/:newsTitle',

加入了正则，我们再传递数字之外的其他参数，params.vue组件就没有办法接收到

vue-router中的重定向--redirect

redirect基本重定向

我们只要在src/router/index.js把原来的component换成redirect参数就可以了。

export default new Router({

　　routes:[

           {

                 path:'/'

　　　　          component:Hello　　

           },

          {

                 path:'/gohome',

                 redirect:'/'     //这里是指点击gohome直接进入首页

          },    

       ]

})

这里我们设置了gohome路由，但是它并没有配置任何组件，而是直接redirect到path:'/'下了。这就是一个简单的重定向

重定向时传递参数

{

     path:'/news/:newsId(\\d+)/:newsTitle',

     component:News

}

{

       path:'/goparams/:newsId(\\d+)/:newsTitle',  //这里是指点击goparams跳转到news页面，带参数的跳转

       redirect:'/news/:newsId(\\d+)/:newsTitle'

}

已经有了一个news路由配置，我们在设置了一个goparams路由的重定向，并传递了参数。这时候我们的路由参数就可以传递给params.vue组件了。参数的接收和正常的路由接收方法一样

alias别名的使用

使用alias也可以实现重定向的效果

1、首先我们要在路由配置文件里src/router/index.js，设置一个别名

{
  path:'/hi1',
  component:Hi1,
  alias:'/zwt'
}

2、配置我们的<router-link>，起锅别名之后，可以直接使用<router-link>标签里的to属性，进行重定向

<router-link to='/zwt'>zwt</router-link>

redirect和alias的区别

redirect：观察url，redirect是直接改变了url的指，把url变成了真实的path路径。

alias：url路径没有改变，这种情况更友好，让用户知道自己访问的路径，只是改变了<router-view>的内容

路由的过渡动画

<transition>标签

想让路由有过渡动画，需要在<router-view>标签的外部添加<transition>标签。标签还需要一个name属性

<transition name="fade">

    <router-view></router-view>

</transition>

我们在src/App.vue文件里添加了<transition>标签，并给标签起了一个名字叫fade

css过渡名，组件过渡过程中，会有四个css类名进行切换，这四个类名与transition的name属性有关，比如name=“fade”会有如下四类css类名：