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