VueRouter

VueRouter

路由组件

在创建过程中，路由组件和普通组件是一模一样的，使用方法不一样。

• 普通组件是放置在其他组件中的
• 路由组件放在路由配置中

路由配置

所有的路由配置放在一起应该是个数组，单个的路由配置应该是个对象，对象中有很多固定的属性

path

表示路由路径，配置后可以去访问对应的路由，并且将对应的组件显示在 router-view 中

component

表示路由组件的配置，和path一一对应，当匹配到对应的path时，component会被渲染到router-view中

name

我们可以给我们的路由起一个名字，可以使用name属性，不是必填的

redirect

重定向

{
  path: '/a',
  redirect: '/b'
}

如果我们访问 /a 则会直接跳转到 /b

alias

别名

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

我们可以同时访问 /a 或 /b 都可以匹配到对应的组件

children

嵌套路由，在网页中，路由足够复杂时，我们需要使用嵌套路由（当页面的一部分内容改变，公共内容不变时，可以使用嵌套路由），children写法和普通的routes中写法一致

父路由和子路由可以拼接成一个新的完整的路由

{
  path: '/parent',
  children: [
    {
      path: 'child' // /parent/child
    }
  ]
}

{
  path: '/parent',
  children: [
    {
      path: '/child' // /child
    }
  ]
}

url中数据传递

query方式

query方式在配置路由时不需要进行任何的配置，在使用路由时，可以在url之后添加 ?key=value&key=value 的形式

created () {
  this.$route.query.key
}

params方式

params方式和query方式的目的相同，但是方式不同。需要在配置时配置动态路由

{
  path: '/xxx/:key'
}

/xxx/214531

created () {
  this.$route.params.key // 214531
}

路由组件的缓存

路由组件缓存可以使用keep-alive包裹router-view，添加keep-alive会造成动态路由及query参数改变的路由失效，我们可以给keep-alive添加唯一key

<keep-alive>
  <router-view :key="$route.fullPath"></router-view>
</keep-alive>