vue2.x的路由1-基本配置

本文参考网址：http://router.vuejs.org/zh-cn/

注意:vue-router是有明确的版本限制的。vue-router @2.x 只适用于 Vue 2.x 版本。

路由的基本配置

其实，vue-router的原理是一个history堆栈，后进后出者渲染。

（a）路由匹配优先级

同一个路径可能匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

（b）配置路由参数——使用【斜杠+冒号】隔开

示例：

const router = new VueRouter({

  routes: [

    { path: '/user/:id', component: User }

  ]

})

const User = {

  template: '<div>User {{ $route.params.id }}</div>'

}

注释：当两个路由都渲染同个组件时，比起销毁再创建，复用则显得更加高效。不过，复用组件也意味着组件的生命周期钩子不会再被调用。因此，复用组件时，可以通过watch $route 对象，从而对路由参数的变化作出响应。

示例：

const User = {

  template: '<div>User {{ $route.params.id }}</div>',

  watch: {

    '$route' (to, from) {

      // 对路由变化作出响应...

    }

  }

}

 

（c）嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件。

而，为了控制嵌套路由对应的子组件渲染，需要在 VueRouter 的参数中使用 children 配置。

children 配置就是像 routes 配置一样的路由配置数组，所以，可以嵌套多层路由。

 

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

 

示例：（对比上面的示例）

const User = {

  template: `

    <divclass="user">

      <h2>User {{ $route.params.id }}</h2>

      <router-view></router-view>//嵌套的子路由；

    </div>

  `

}

const router = new VueRouter({

  routes: [

{

path:'/user/:id',

component:User,

           children: [

                 {

                        // 当 /user/:id/profile 匹配成功，

                        path: 'profile',

                        component: UserProfile

                 },

                 {

                        // 当 /user/:id/posts 匹配成功

                        path: 'posts',

                        component: UserPosts

                 }

           ]

    }

  ]

})

 

（d）编程式的导航

即，通过js手段主动设置导航；（非链接式/声明式）

 

声明式vs. 编程式

注释：以上两者的效果是一致的。它们的参数格式可以是一个字符串，也可以是一个对象。（如下示例）

示例：

<router-link to="/">indexpage</router-link>

<router-linkto="/list">list page</router-link> 

<router-link :to="{ name: 'user',params: { userId: 123 }}">User</router-link>

 

router.push('home'); // 字符串

router.push({ path: 'home' });  // 对象

router.push({ name: 'user', params: { userId: 123 }});  // 命名的路由

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

 

操作路由的常见方法：

router.push('home'); //添加路由；

router.replace(location); //替换当前路由；（不会增加）参数格式与push相同。

router.go(n); //参数是一个整数(正/负)，在 history 记录中向前或者后退多少步，类似 window.history.go(n)；如果 n 记录不够用，那就会导航失败。

 

（e）命名路由—— 可选的，功能是方便标志与使用（替换复杂的path属性值）

示例：

const router = new VueRouter({

 routes: [

    {

     path: '/user/:userId',

     name: 'user',

     component: User

    }

  ]

})

 

<router-link :to="{ name: 'user',params: { userId: 123 }}">User</router-link>

或

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

 

（f）命名视图—— 同时使用多个视图，需要命名区分

 

命名视图一般用于同时（同级）展示多个视图，而不是嵌套展示；例如， sidebar（侧导航）和 main（主内容）两个视图的同时显示。

可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。 

通常router-view 没有设置名字，会默认为 default（唯一）。

对于同个路由，多个视图就需要多个组件。同时，为了确保组件的一一对应，需要正确 配置components （带上 s）

 

示例：

<ul>

   <li><router-linkto="/">/</router-link></li>

   <li><router-linkto="/other">/other</router-link></li>

</ul>

<router-viewclass="view one"></router-view>

<router-viewclass="view two" name="a"></router-view>

<router-viewclass="view three" name="b"></router-view>

 

const Foo = { template:'<div>foo</div>' }

const Bar = { template:'<div>bar</div>' }

const Baz = { template:'<div>baz</div>' }

 

const router = new VueRouter({

 mode: 'history',

 routes: [

    {path: '/',      

     components: {

        default: Foo,

        a: Bar,

        b: Baz

      }

   },

    {

     path: '/other',

     components: {

       default: Baz,

       a: Bar,

       b: Foo

     }

    }

  ]

})

 

（g）重定向redirect

重定向格式如下：

示例：

const router = new VueRouter({

 routes: [

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

{ path: '/b', redirect: { name: 'foo' }},

{ path: '/c', redirect: to => {

      // 方法接收 目标路由 作为参数

      // return 重定向的 字符串路径/路径对象

}}

  ]

})

注释：配置重定向了，该路由的component属性就失效了。

 

（h）别名alias —— 不影响路由

 

示例：

const router = new VueRouter({

 routes: [

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

  ]

})

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

 

（i）vue-router模式

Vue-router模式包含 hash模式（默认,#/user/:id）与history模式（/user/:id）。

Ø  hash模式 —— 使用 URL 的 hash 来模拟一个完整的 URL；

Ø  history模式——充分利用 history.pushState API 来完成 URL 跳转；

 

两种SPA路由模式

共同点：当 URL 改变时，页面不会重新加载。

不同点：外形不一致（history看起来更优雅一点，像是MVC的格式）；

 

History模式的注意事项：

这种history模式要玩好还需要后台配置支持。

因为应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

 

*修补路由空缺：在没有匹配的路由时常规下会返回404页面。

示例：

const router = new VueRouter({

 mode: 'history',

 routes: [

    {path: '*', component: NotFoundComponent }

  ]

})

或者，如果你是用 Node.js 作后台，可以使用服务端的路由来匹配 URL，当没有匹配到路由的时候返回 404，从而实现 fallback。

 

更多关于vue-router的信息请查阅vue-router API文档。