vue入门（七）Vue Router

一、基础

用 Vue.js + Vue Router 创建单页应用

使用router-link组件来导航，通过传入to属性指定连接，router-link默认会被渲染成一个<a>标签（类似a但点击不会再刷新页面）

<router-link to="/foo">Go to Foo</router-link>
<router-view>  此处渲染的组件由vue-router指定 </router-view>

Vue.use(VueRouter)    //模块化机制编程 在main中

// 定义路由，创建 router 实例，每个路由应该映射一个组件。
const router = new VueRouter(routes = [ { path: '/foo', component: Foo }],mode:'history')
//创建和挂载根实例,通过 router 配置参数注入路由
const app = new Vue({  router  }).$mount('#app')

可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由

二、动态路由匹配 

    把某种模式匹配到的所有路由，全都映射到同个组件，,可以在vue-router的路由路径中使用“动态路径参数”

const router = new VueRouter({
  routes: [{ path: '/user/:id', component: User }]
})    // 动态路径参数，以冒号开头

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用。

也可以在一个路由中设置多段‘路径参数’，如

模式：/user/:username/post/:post_id       匹配路径/user/evan/post/123      $route.params ：{ username: 'evan', post_id: '123' }

1、响应路由参数的变化

当使用路由参数时，原来的组件实例会被复用，组件的生命周期钩子不会再被调用。此时若想对路由参数的变化做出响应，可以watch $route对象。或者使用导航守卫

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 响应 }  }  }

2、捕获所有路由

常规参数只会匹配被 / 分隔的 URL 片段中的字符。想匹配任意路径，可以使用通配符 *，此时

$route.params.pathMatch内包含了URL通过 * 被匹配的部分

3、匹配优先级：先定义的优先级就高

三、嵌套路由

    要在嵌套的出口（最外层的route-view）中渲染组件，需要在VueRouter的参数中使用children配置

const router = new VueRouter({
  routes: [{ path: '/user/:id', component: User,
      children: [{// 当 /user/:id/profile 匹配成功， UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        }] }] })

    以 / 开头的嵌套路径会被当作根路径。

四、编程式的导航

1、router.push()

router.push( ... ) 与 router-lint to=" ... "相同效果

router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

params要用name来引入，（如果提供了 path，params 会被忽略）

2、router.replace() 与 router.push类似，但只是替换掉当前的 history 记录

3、router.go(n)  在 history 记录中向前或者后退多少步

五、

1、命名路由

    在路由定义、router-link to，router.push()中，都可以使用命名的路由，name:' '

2、命名视图

    同时 (同级) 展示多个视图，而不是嵌套展示，可以使用命名视图，如name:"a"，此时components

components: {
        default: Foo,
        a: Bar,
        b: Baz    }

3、路由重定向

重定向：当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，（借此可以设置默认打开页面）

routes: [   { path: '/a', redirect: '/b' }  ]    //当路径为a时会导航到b中
{ path: '/a', redirect: to => {//可以是路径、名字 }      //或者这样

4、别名

别名：当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a

{ path: '/a', component: A, alias: '/b' }

5、路由组件传参？？？

6、history模式

vue-router 默认 hash 模式：当 URL（有#） 改变时，页面不会重新加载。

history模式：正常的URL，但是每次刷新都会发出请求，可以通过mode: 'history'改为history模式

三、路由对象属性

$route.path    对应当前路由的路径

$route.params    一个 key/value 对象，包含了动态片段和全匹配片段

$route.query     一个 key/value 对象，表示 URL 查询参数

$route.hash         当前路由的 hash 值 (带 #)