vue Router——基础篇

vue——Router简介

  • vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。
  • vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。
  • 传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换

1.动态路由匹配

定义路由

export default new Router({
  routes: [
    {
      path: '/BookDetails/:book_id',
      name: 'BookDetails',
      component: BookDetails
    },
    {
      path: '/BookDetailsTwo/user/:username/book/:book_id',
      name: 'BookDetailsTwo',
      component: BookDetailsTwo
    },
  ]
})

页面

<template>
  <div class="book">
    <router-link :to="{ name:'BookDetails',params: { book_id: 1}}">跳转书籍详情\^o^/</router-link><br/><br/><br/>
    <router-link :to="{ name:'BookDetailsTwo',params: { book_id: 1,username: '小嘟嘟'}}">跳转高级书籍详情┗|`O′|┛</router-link>
  </div>
</template>

桥豆麻袋(~ ̄▽ ̄)~,对<router-link>感兴趣的可以去看 官网 ,或者 小姐姐(●'◡'●) 的博客,然后go on

点击跳转后的路由

http://localhost:8080/#/BookDetails/1
http://localhost:8080/#/BookDetailsTwo/user/小嘟嘟/book/1

跳转的页面接收路由参数(以第二个跳转为例)

<template>
  <div>
    <div>人员姓名:{{$route.params.username }}</div>
    <div>书籍Id:{{$route.params.book_id }}</div>
  </div>
</template>

1-1响应路由参数的变化

提醒一下,当使用路由参数时,例如从 /BookDetails/1 导航到 /BookDetails/2,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。

BookDetails组件

<template>
  <div class="book-details">
    <div>书籍详情 Id:{{ $route.params.book_id }}</div><br/><br/>
    <router-link :to="{ name:'BookDetails',params: { book_id: 2}}">自己跳自己o(* ̄▽ ̄*)ブ</router-link>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  created(){
    console.log('进入图书详情~~~')
  }
}
</script>

当从父页面跳转过来时会执行生命周期,当点击组件里‘自己跳自己’时,并不会触发生命周期

当然有解决方法,还是两种(●ˇ∀ˇ●)

方法一(使用watch (监测变化) $route 对象)

BookDetails组件

<template>
  <div class="book-details">
    <div>书籍详情 Id:{{ $route.params.book_id }}</div><br/><br/>
    <router-link :to="{ name:'BookDetails',params: { book_id: 2}}">自己跳自己o(* ̄▽ ̄*)ブ</router-link>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  created(){
    console.log('进入图书详情~~~')
  },
  watch:{
    '$route'(to, from) {
      console.log(to ,from, '路由监听')
    }
  }
}
</script>

方法二(使用beforeRouteUpdate 导航守卫)

BookDetails组件

<template>
  <div class="book-details">
    <div>书籍详情 Id:{{ $route.params.book_id }}</div><br/><br/>
    <router-link :to="{ name:'BookDetails',params: { book_id: 2}}">自己跳自己o(* ̄▽ ̄*)ブ</router-link>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  created(){
    console.log('进入图书详情~~~')
  },
  beforeRouteUpdate(to, from, next){
    console.log(to, from, next,'导航守卫')
    next()
  },
  watch:{
    '$route'(to, from) {
      console.log(to ,from, '路由监听')
    }
  }
}
</script>

注意!!!用beforeRouteUpdate记得要写next(),否则不会跳转路由

1-2捕获所有路由或 404 Not found 路由

在上面定义好的路由最后面添加新的路由

{
  path: '/Fruits*',
  name: 'FruitsBanana',
  component: FruitsBanana
},
{
  path: '*',
  name: 'NotFound',
  component: NotFound
}

当使用通配符路由时,请确保路由的顺序是正确的,也就是说含有通配符的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误

当我们输入路由

http://localhost:8080/#/FruitsApple

会匹配到‘/Fruits*’,所以会跳转到FruitsBanana组件

再次输入路由

http://localhost:8080/#/IAmVeryHappy

这时候就会匹配到 ‘*’, 自然就进入到了写好的404页面(~ ̄▽ ̄)~

1-3高级匹配模式

vue-router 使用 path-to-regexp 作为路径匹配引擎,所以支持很多高级的匹配模式,例如:可选的动态路径参数、匹配零个或多个、一个或多个,甚至是自定义正则匹配。

举个栗子(~ ̄▽ ̄)~

// 第一种(通过?的使用可以将参数变为可选项)
{
  path: '/PathToRegexp/:id?',
  name: 'PathToRegexp',
  component: PathToRegexp
}


// 第二种(使用正则,只匹配id是数字)
{
  path: '/PathToRegexp/:id(\\d+)',
  name: 'PathToRegexp',
  component: PathToRegexp
}

更多高级匹配

1-4匹配优先级

有时候,同一个路径可以匹配多个路由,此时,匹配的优先级就按照路由的定义顺序:谁先定义的,谁的优先级就最高。

定义路由

{
  path: '/Fruits*',
  name: 'FruitsBanana',
  component: FruitsBanana
},
{
  path: '/Fruits*',
  name: 'FruitsPear',
  component: FruitsPear
}

如上面所示,谁先定义的,谁的优先级就最高,只要匹配成功,就会进入到FruitsBanana组件

2.嵌套路由

Vue会自带一个 是最顶层的出口,渲染最高级路由匹配到的组件。同样地,一个被渲染组件同样可以包含自己的嵌套

呐,现在来改变一下路由

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  children: [
    {
      path: 'Apple',
      name: 'Apple',
      component: Apple
    },
    {
      path: 'Grape',
      name: 'Grape',
      component: Grape
    },
  ]
}

组件

<template>
  <div>
    我是水果页面<br/><br/><br/>
    <router-link :to="{ name:'Apple'}">苹果🍎</router-link><br/><br/><br/>
    <router-link :to="{ name:'Grape'}">葡萄🍇</router-link><br/><br/><br/>
    <router-view></router-view>
  </div>
</template>

当我们访问

http://localhost:8080/#/Fruits/Apple
http://localhost:8080/#/Fruits/Grape

就会更改组件里面<router-view></router-view>的容

but当我们访问

http://localhost:8080/#/Fruits

的时候<router-view></router-view>是没用内容的(T_T)

解决方法

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  children: [
    {
      path:'',
      component: Strawberry
    },
    {
      path: 'Apple',
      name: 'Apple',
      component: Apple
    },
    {
      path: 'Grape',
      name: 'Grape',
      component: Grape
    },
  ]
}

没错加一个空的path,这时候访问

http://localhost:8080/#/Fruits

<router-view></router-view>就会显示Strawberry组件的内容(●ˇ∀ˇ●)

3.编程式的导航

除了使用<router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。

router.push(location, onComplete?, onAbort?)

注意:在 Vue 实例内部,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

当你点击 时,这个方法会在内部调用,所以说,点击 等同于调用 router.push(...)。

声明式 编程式
<router-link :to="..."> router.push(...)
// 字符串
router.push('home')

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

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

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

注意:如果提供了 pathparams 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

同样的规则也适用于 router-link 组件的 to 属性。

router.replace(location, onComplete?, onAbort?)

跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录

声明式 编程式
<router-link :to="..." replace> router.replace(...)

router.go(n)

这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)

// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)

// 后退一步记录,等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)

4.命名路由

有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 Router 实例的时候,在 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 }})

5.命名视图

首先来定义页面

<template>
  <div id="app">
    <router-view/>
    <router-view name="fruits"/>
    <router-view name="animal"/>
  </div>
</template>

路由

{
  path: '/',
  components: {
    default: Food, // 默认视图
    fruits:Pineapple,
    animal:Cat
  }
}

当我们访问路由

http://localhost:8081/#/

的时候,会渲染视图对应的组件

嵌套命名视图

定义Food组件

<template>
  我是Food
  <router-view/>
  <router-view name="animal"/>
</template>

定义路由

{
  path: '/',
  component: Food,
  children: [
    {
      path: 'Milk',
      component: Milk
    },
    {
      path: 'Cat',
      components: {
        default: Fish,
        animal: Cat
      }
    }
  ]
}

访问路由

http://localhost:8081/#/Milk
// 渲染对应的 Milk 组件

http://localhost:8081/#/Cat
// 渲染对应的 Fish、Cat 组件

有时候我们项目会有一个始终存在的导航栏,但是呢,登录页又不需要,这时候就可以使用命名视图

6.重定向和别名

重定向(redirect)

路由

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  redirect: '/Fruits/Apple'
  children: [
    {
      path: 'Apple',
      name: 'Apple',
      component: Apple
    },
    {
      path: 'Grape',
      name: 'Grape',
      component: Grape
    },
  ]
}

当我们访问

http://localhost:8080/#/Fruits

的时候,对自动跳转到

http://localhost:8080/#/Fruits/Apple

注意!!!

上面有写到

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  children: [
    {
      path:'',
      component: Strawberry
    },
    {
      path: 'Apple',
      name: 'Apple',
      component: Apple
    },
    {
      path: 'Grape',
      name: 'Grape',
      component: Grape
    }
  ]
},

其中

{
  path:'',
  component: Strawberry
}
// 不会改变路由,只是会把<router-view/>默认显示到Strawberry组件

redirect: '/Fruits/Apple'
// 会改变路由到Apple

是不一样的

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

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  redirect: {name: 'Apple'},
  children: [
    {
      path: 'Apple',
      name: 'Apple',
      component: Apple
    },
    {
      path: 'Grape',
      name: 'Grape',
      component: Grape
    },
  ]
}

当我们访问

http://localhost:8080/#/Fruits

的时候,对自动跳转到

http://localhost:8080/#/Fruits/Apple

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

{ 
  path: '/Fruits', 
  redirect: to => {
  // 方法接收 目标路由 作为参数
  // return 重定向的 字符串路径/路径对象
  }
}

这个就不细讲了,感兴趣的可以看这里呦

别名(alias)

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

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  alias: '/b'
}

当访问

http://localhost:8080/#/b

实际上是访问的

http://localhost:8080/#/Fruits

但地址是不会变成/Fruits

当然它也有高级的玩法,感兴趣的可以看这里呦

7.路由组件传参

在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。

使用 props 将组件和路由解耦

路由

{
  path: '/BookDetails/:book_id',
  name: 'BookDetails',
  component: BookDetails,
  props: true
}

BookDetails组件

<template>
  <div class="book-details">
    {{book_id}}
  </div>
</template>

<script>
export default {
  props: ['book_id'],
  data () {
    return {
    }
  }
}
</script>

布尔模式

在路由配置中设置 props: true 时默认将 $route.params 数据传给组件,组件需要通过自身的 props 属性取出 params 中的属性

对象模式

如果 props 是一个对象,其下所有属性均会被传入组件。需要注意的是当 props 必须是是静态的

路由

{
  path: '/BookDetails/:book_id',
  name: 'BookDetails',
  component: BookDetails,
  props: {
    name: 'lucky',
    id: 7
  }
}

BookDetails组件

<template>
  <div class="book-details">
    {{name + id}}
  </div>
</template>

<script>
export default {
  props: ['name', 'id'],
  data () {
    return {
    }
  }
}
</script>

函数模式

路由

{
  path: '/BookDetails',
  name: 'BookDetails',
  component: BookDetails,
  props: (route) => ({ book_id: route.query.book_id })
}

父组件

<template>
  <div class="book">
    <button @click="goRouter">函数模式</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods:{
    goRouter(){
      this.$router.push({path: 'BookDetails', query: {book_id: 999}})
    },
  }
}
</script>

没错它也有高级的玩法,感兴趣的可以看这里呦

8.HTML5 History 模式

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

路由

export default new Router({
  mode: 'history',
  routes: [...]
})

来看一下用之前和用之后的地址(~ ̄▽ ̄)~

// hash
http://localhost:8080/#/
http://localhost:8080/#/BookDetails/1

// history
http://localhost:8080/
http://localhost:8080/BookDetails/1

emmmmmmmmm 好看了。。。 (✿◕‿◕✿)

but

不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/BookDetails/id 就会返回 404,这就不好看了

啊哈,后台怎么配置呢?自己去看吧,我不知道(~ ̄▽ ̄)~

vue Router——进阶篇

Vue Router

Vue Router Api

posted @ 2019-05-21 11:11  妖色调  阅读(7430)  评论(1编辑  收藏  举报