vue-router 你可能忽略的知识点

vue-router 你可能忽略的知识点

vue-router相信大家都不陌生，并且很多都有实战经验。可能有很多你忽略的一些点。

1、丑陋的hash值  #

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

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

当你使用 history 模式时，URL 就像正常的 url，例http://yoursite.com/user/id，也好看！但是这种模式需要后端支持，否则就会返回404，所以最好在服务器端加一个覆盖所有情况的候选资源：匹配不到就返回同一个index.html,即你app的依赖页面。

nginx的配置：

location / {
try_files $uri $uri/ /index.html;
}
复制代码

但是这里有个问题你所有的访问都只会跳转到index.html页面了，这样就没有达到路由的目的了。别担心，看下面的例子

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }
const routes = {  '/': Home,  '/about': About}
new Vue({ 
 el: '#app',  
data: {  
    currentRoute: window.location.pathname //获取当前地址
  },
  computed: {
    ViewComponent () {    
return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})
复制代码

这样就会根据当前地址去找到对应的路由跳转。

2、动态路由匹配

（1）路由参数匹配

假设我们有个页面，只是想要根据不同的参数来显示不同的页面，如：/user/foo 和 /user/bar 都将映射到相同的路由，但是根据参数foo/bar来显示不同的页面。

const User = {
template: '<div>User</div>'
}

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

“路径参数”使用冒号 : 标记，当匹配到一个路由时，参数值会被设置到 this.

3、同级展示多个视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这时就可以使用命名视图了。如果 router-view 没有设置name名字，那么默认为 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, //default 默认的router-view名字
a: Bar,
b: Baz
}
}
]
})
复制代码

4、重定向和别名
“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b。 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 路由添加一个 beforeEach 或 beforeLeave 守卫并不会有任何效果。

别名：/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

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

5、路由组件传参

在组件中使用 route.params可以在组件内使用。因此我们可以根据参数去更新我们的模版。注意：当使用路由参数跳转的时候，原来的组件实例会被复用。（不会销毁再创建，因此组件的生命周期钩子不会再被调用）3、同级展示多个视图有时候想同时(同级)展示多个视图，而不是嵌套展示，例如创建一个布局，有sidebar(侧导航)和main(主内容)两个视图，这时就可以使用命名视图了。如果router−view没有设置name名字，那么默认为default。¨G4G一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用components配置(带上s)：¨G5G4、重定向和别名“重定向”的意思是，当用户访问/a时，URL将会被替换成/b，然后匹配路由为/b。routes配置来完成，下面例子是从/a重定向到/b：¨G6G重定向的目标也可以是一个命名的路由：¨G7G甚至是一个方法，动态返回重定向目标：¨G8G注意导航守卫并没有应用在跳转路由上，而仅仅应用在其目标上。在下面这个例子中，为/a路由添加一个beforeEach或beforeLeave守卫并不会有任何效果。别名：/a的别名是/b，意味着，当用户访问/b时，URL会保持为/b，但是路由匹配则为/a，就像用户访问/a一样。¨G9G5、路由组件传参在组件中使用route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。使用 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 }
    }
  ]
})
复制代码

6、过渡动效

是基本的动态组件，所以我们可以用 组件给它添加一些过渡效果：

<!-- 使用动态的 transition name -->
<transition :name="transitionName">
<router-view></router-view>
</transition>
复制代码

7、数据获取

有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：

导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。created

导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。beforeRouteEnter

从技术角度讲，两种方式都不错 —— 就看你想要的用户体验是哪种。

8、滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：

const router = new VueRouter({
routes: [...],
  scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
  }
})
复制代码

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

// 对于所有路由导航，简单地让页面滚动到顶部。
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}