vue-router基础教程二

命名路由

有时候通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建Router实例的时候，在routes配置中给某个路由设置名称。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

就是添加一个name属性值，用来表示path路径，主要是使用方便。

命名视图

有时候想同时(同级)展示多个视图，而不是嵌套展示，例如创建一个布局，有sidebar(侧导航)和main(主内容)两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果router-view没有设置名字，那么默认为default。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用components配置(带上s)：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

嵌套命名视图

我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套router-view组件。

<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>

然后你可以用这个路由配置完成该布局：

{
  path: '/settings',
  // 你也可以在顶级路由就配置命名视图
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}

重定向和别名

重定向

重定向也是通过routes配置来完成，下面的例子是从/a重定向到/b：

const router = new VueRouter({
    routes: [
        {path: '/a', redirect: '/b'}
    ]
})

重定向的目标也可以是一个命名的路由：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

甚至是一个方法，动态返回重定向目标：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

重定向的意思是当用户访问/a时，URL将会被替换/b，然后匹配路由为/b。

别名

/a的别名是/b，意味着，当用户访问/b时，URL会保持为/b，但是路由匹配则为/a，就像用户访问/a一样。意思是虽然访问的是/b，URL也是/b，但是显示的却是匹配/a路由的组件。例如：

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

路由组件传参

在组件中使用route的耦合

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

路由组件传参

在组件中使用route的耦合

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

通过props解耦

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

这样子你便可以在任何地方使用该组件，使得该组件更易于重用和测试。

布尔模式

如果props被设置为true，route.params将会被设置为组件属性。

对象模式

如果props是一个对象，它会被按原样设置为组件属性。当props是静态的时候有用。

const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})

函数模式

你可以创建一个函数返回props。这样你便可以将参数转换成另一种类型，将静态值与路由的值结合等等。

const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
  ]
})

URL /search?q=vue 会将 {query: 'vue'} 作为属性传递给 SearchUser 组件。
请尽可能保持 props 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 props，请使用包装组件，这样 Vue 才可以对状态变化做出反应。

HTML5 History模式

vue-router默认hash模式---使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。
如果不想要很丑的hash，我们可以用路由的history模式，这种模式充分利用history.pushState API来完成URL跳转而无须重新加载页面。

const router = new VueRouter({
     mode: 'history',
     routes: [...]
})

当你使用history模式时，URL就像正常的URL，例如：http://yoursite.com/user/id，也好看！不过这种模式要玩好，还需要后台配置支持。

渐进式框架的大概意思就是你可以只用我的一部分，而不是用了我这一点就必须用我的所有部分。比如用vue框架，不需要一定使用vue的插件也可以使用axios插件。

vue-router的hash模式与history模式

hash模式

hash属性是一个可读可写的字符串，该字符串是URL的锚部分(从#号开始的部分)。例如：http://www.runoob.com/jsref/prop-loc-hash.html#/aaafafsadfd的hash属性是#/aaafafsadfd。hash属性的修改不会导致浏览器刷新，所以vue-router就是利用这一点来实现前端路由。
当直接访问 http://example.com/#/foobar 的时候，实际上向服务器发起的请求是 http://example.com/ ,因此会首先加载页面及脚本文件，接下来脚本执行路由跳转,一切正常。

history模式

history对象包含用户(在浏览器窗口中)访问过的URL。
history对象是window对象的一部分，可通过window.history属性对其进行访问。

因此，hash模式和history模式都属于浏览器自身的属性，vue-router只是利用了这两个特性来实现路由。
提供两种模式的原因：
vue是渐进式前端开发框架，为了实现SPA，需要引入前端路由系统。前端路由的核心是：改变视图的同时不会向后端发送请求(改变视图的同时不会刷新页面/页面重载)。

因为vue是组件式开发，视图的改变不是因为跳转到另一个url，而是url没有变化，只是#后面的路由发生变化，也就是发生了组件的创建与销毁。

为了达到这一目的，浏览器提供了hash和history模式。
1.hash：hash虽然出现在URL中，但不会被包含在http请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
2.history对象有三个方法：back()、forward()、go()，新增了pushState()、replaceState()对历史记录修改的功能。只是当它们执行修改时，虽然改变了当前的URL，但浏览器不会立即向后端发送请求。

这两种模式都可以用作前端路由，但是我们一般用hash模式。

参考文章：
https://blog.csdn.net/majunjie2017/article/details/78507551