vue路由

1.安装：

　　文件script引入：

　　　　<script src="/path/to/vue.js"></script>

　　　　<script src="/path/to/vue-router.js"></script>

　　或者

　　　　npm install vue-router

　　然后在entry.js中

　　　　import Vue from 'vue'

　　　　import VueRouter from 'vue-router'

　　　　Vue.use(VueRouter)

2.基本构建：

　　假设已有组件A，B。

　　1.创建routes数组：

　　　　const routes=[ {path:'linkToA',component:A}, {path:'linkToB',component:B}];  //路由地址与组件的映射。

　　2.创建router实例：

　　　　const router = new VueRouter({
　　　　　　routes // （缩写）相当于 routes: routes
　　　　})

　　3.将router实例注入根实例：

　　　　const app = new Vue({
　　　　　　router
　　　　}).$mount('#app')

HTML：

　　<div id="app">

　　　　<router-link to="linkToA">Go to A</router-link>
　　　　<router-link to="linkToB">Go to A</router-link>

　　</div>　　

2.动态参数：

　　<router-link to=‘/user/foo’> to foo</router-link>    <router-link to=‘/user/bar’> to bar</router-link> 

　　<router-view></router-view>  //视图组件在此渲染

　　当某个视图需要被复用的时候，比如<router-link>跳转到‘/user/foo’或‘/user/bar’，需要展示的是同一张视图，只是用户名字不一样。

　　这时候在routes数组中，可以使用 {path: '/user/:id', component: user,}  即一个视图组件来匹配‘/user/foo’或‘/user/bar’这一级的视图。

　　:id称为路径参数，冒号：是路径参数的标志，id此时是一个变量，对应着<router-link>标签to属性中“/user/”下一级的段名。

　　比如：

　　点击<router-link to=‘/user/foo’> to foo</router-link>之后，当前路径path就改变成‘/user/foo’,此时变量id=‘foo’，保存在$route.params.id中。

　　点击<router-link to=‘/user/bar’> to bar</router-link>之后，当前路径path就改变成‘/user/bar’,此时变量id=‘bar’，保存在$route.params.id中。

　　但是我们调用的还是同一个组件user。

　　*官网指出，使用路由参数时候，因为组件实例被复用了，所以其生命周期钩子（钩子即函数，比如这个组件实例被创建、挂载、销毁的时刻，可以触发相应的函数，这种函数称为钩子）不会被触发。

　　————“想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象”

　　watch: {

　　　　 '$route' (to, from) { // 对路由变化作出响应... }

　　}

3.路由嵌套：

　　一个视图里面如果还需要渲染另一个视图，比如user组件中还想展示一个视图data。

　　可以在user组件 的<template>中添加<router-view>

　　<template>

　　　　<div>

　　　　<router-link :to="('/user/'+$route.params.id+'/data')">show  data</router-link>

　　　　<router-view></router-view>

　　　　</div>

　　</template>

　　上面的例子只想说名三个点：

　　*<router-view>渲染的组件中可以嵌套<router-view>和<<router-link>。

　　*组件的template只能有一个根元素

　　*如果我们想在子视图中再使用<router-link>，但是前面已经用了动态路由参数，可以给to特性加v-bind，然后用上面的方法往路径中添加$route.params.id。因为v-bind绑定后to的值是一个js。

　　另外，:to后面可以加一个对象字符串{name:xxx,params:{key:val}}.

$route:

 　　表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息.

　　$route.path --string
　　　　对应当前路由的绝对路径
　　$route.params --Object
　　　　一个 key/value 对象，包含了 动态片段 和 全匹配片段
　　$route.query --Object
　　　　一个 key/value 对象，表示 URL 查询参数。
　　$route.hash --string
　　$route.fullPath --string
　　　　完成解析后的 URL，包含查询参数和 hash 的完整路径。
　　$route.matched --Array<RouteRecord>
　　　　包含当前路由的所有嵌套路径片段的 路由记录
　　$route.name --string
　　　　当前路由的名称，如果有的话。

programming routing:

　　router.push(location)
　　// 字符串
　　router.push('home')
　　// 对象
　　router.push({ path: 'home' })
　　// 命名的路由
　　router.push({ name: 'user', params: { userId: 123 }})
　　// 带查询参数，变成 /register?plan=private
　　router.push({ path: 'register', query: { plan: 'private' }})

　　router.replace(location)
　　router.go(n)

！！！在子组件中使用时，访问router应该用this.$router.