Vue 路由知识二(工程模式下路由的配置)

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

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

import Vue from 'vue'   //引入Vue

import Router from 'vue-router'  //引入vue-router

import 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传参。

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

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

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

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

vue-router 利用url传递参数：

 :冒号的形式传递参数
我们可以在理由配置文件里以:冒号的形式传递参数，这就是对参数的绑定。
在配置文件里以冒号的形式设置参数。我们在src/router/index.js文件里配置路由。
{
    path:'/params/:newsId/:newsTitle',
     component:Params
} 

<router-link to="/params/1222444/nihao">params</router-link> |

<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: 'hellow vue-router'

    }

  }

}

</script>

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'
}