vue-router是一个插件包，所以我们还是需要用npm/cnpm来进行安装的：npm/cnpm install vue-router --save-dev。

在路由的核心文件：src/router/index.js分析：

import Vue from 'vue'   //引入Vueimport Router from 'vue-router'  //引入vue-routerimport Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件 Vue.use(Router)  //Vue全局使用Router export default new Router({  routes: [              //配置路由，这里是个数组    {                    //每一个链接都是一个对象      path: '/',         //链接路径      name: 'Hello',     //路由名称，      component: Hello   //对应的组件模板    }  ]})

router-link制作导航：

导航链接，我们只要点击就可以实现页面内容的变化。制作链接需要<router-link>标签，我们先来看一下它的语法。

<router-link to="/">[显示字段]</router-link>

to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to=”/” ，

[显示字段] ：就是我们要显示给用户的导航名称，比如首页 新闻页 产品页等等。

子路由的写法是在原有的路由配置下加入children字段。

children:[　　{path:'/',component:xxx},　　{path:'xx',component:xxx},]

children字段后边跟的是个数组，数组里和其他配置路由基本相同，需要配置path和component。（在配置路由文件前，需要先用import引入相应组件）

路由传参方式一：在路由文件src/router/index.js里配置name属性。

routes: [

　　{

　　　　path: '/',

　　　　name: 'Hello',

　　　　component: Hello

　　}

]

模板里(src/App.vue)用$router.name的形势接收，比如直接在模板中显示：

<p>{

{ $route.name}}</p>

路由传参方式二：通过<router-link> 标签中的to传参。

     
      valueString
     

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

name：就是我们在路由配置文件中起的name值。

params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。

单页面多路由区域操作：在一个页面里我们有2个以上<router-view>区域，我们通过配置路由的js文件，来操作这些区域的内容。

vue-router 利用url传递参数：

 :冒号的形式传递参数

我们可以在理由配置文件里以:冒号的形式传递参数，这就是对参数的绑定。

在配置文件里以冒号的形式设置参数。我们在src/router/index.js文件里配置路由。

{

    path:'/params/:newsId/:newsTitle',

     component:Params

} 

      
       params
       |

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

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

重定向时传递参数：只需要在redirect后边的参数里复制重定向路径的path参数就可以。

{  path:'/params/:newsId(\\d+)/:newsTitle',  component:Params},{  path:'/goParams/:newsId(\\d+)/:newsTitle',  redirect:'/params/:newsId(\\d+)/:newsTitle'}

alias别名的使用：

 使用redirect进行重定向了。使用alias别名的形式，我们也可以实现类似重定向的效果。

{

    path: '/hi1',

    component: Hi1,

    alias:'/task'

 }

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

<router-link to="/task">gogo</router-link>

redirect和alias的区别

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

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

注意：别名请不要用在path为’/’中，如下代码的别名是不起作用的。

{

　　path: '/',

　　component: Hello,

　　alias:'/home'

}