21、路由router

路由是所有前端框架中都必须具备的元素。 它定义了对于那个URL（页面），应该由那个文件来处理。

在Vuejs中，路由专门独立成为了一个项目: vue-router.

基本用法

每个vue页面,都要对应一个路由. 例如, 我们要做一个”博客列表页”, 那么,我们需要两个东西:

1、 vue文件,例如:src/components/books.vue负责展示页面；
2. 路由代码, 让 /#/books 与 上面的vue文件对应.

下面的代码就是一个完整的路由文件:

import Vue from 'vue' 
import Router from 'vue-router' 

// 增加这一行, 作用是引入 SayHi 这个component 
import SayHi from '@/components/SayHi' 

Vue.use(Router) 
export default new Router({ 
  routes: [ 

    // 增加下面几行, 表示定义了  /#/say_hi 这个url 
    { 
      path: '/say_hi', 
      name: 'SayHi', 
      component: SayHi 
    }, 
  ] 
}) 

写法是固定的. 其中的:

• path: 定义了 链接地址, 例如: /#/say_hi
• name: 为这个路由加个名字, 方便以后引用,例如: this.$router.push({name: 'SayHi'})
• component: 该路由由哪个component来处理.

跳转到某个路由时,带上参数

有路由，就会有参数，我们看一下路由是如何处理参数的。

1. 对于普通的参数

例如:

routes: [ 
  { 
    path: '/blog', 
    name: 'Blog' 
  }, 
] 

在视图中, 我们这样做:

<router-Link:to="{name: 'Blog', query:{id: 3} }">User</router-link> 

当用户点击这个代码生成的 html 页面时，就会触发跳转。

在<script/>中,也可以这样做:

this.$router.push({name: 'Blog', query: {id: 3}}) 

都会跳转到: /#/blog?id=3 这个url.

对于在路由中声明的参数

例如:

routes: [ 
  { 
    path: '/blog/:id', 
    name: 'Blog' 
  }, 
] 

在视图中, 我们这样做:

<router-Link:to="{name: 'Blog', params: {id: 3} }">User</router-link> 

在script中,也可以这样做:

this.$router.push({name: 'Blog', params: {id: 3}}) 

都会跳转到: /#/blog/3 这个url.

根据路由获取参数

Vue的路由中,参数获取有两种方式: query 和 params

获取普通参数

对于 /#/blogs?id=3 中的参数,这样获取:

this.$route.query.id  // 返回结果3 

获取路由中定义好的参数

对于 /#/blogs/3 这样的参数, 对应的路由应该是:

  routes: [ 
    { 
      path: '/blogs/:id',  // 注意这里的 :id 
      ... 
    }, 
  ] 

这个named path, 就可以通过下面代码来获取id:

this.$route.params.id  // 返回结果3 

版权声明：「DDKK.COM 弟弟快看，程序员编程资料站」本站文章，版权归原作者所有