Vue从入门到实战：动态路由匹配

背景介绍

实际开发时，经常需要把匹配某种模式的路由映射到同一个组件。

如/book/1 ,/book/2，/book/3 都将映射到/book/:id

这就是动态路由匹配

前置知识：Vue从入门到实战：感受前端路由

用法1：动态段

在之前的案例上做如下修改：

App.vue

使用<router-link>添加两个导航链接

<template>
  <div id="app">
    <p>
    
      <router-link to="/news">新闻</router-link>
			<router-link to="/books">图书</router-link>
			<router-link to="/videos">视频</router-link>
      <router-link to="/book/1">图书1</router-link>
			<router-link to="/book/2">图书2</router-link>
    </p>
    <router-view></router-view>
    
  </div>
</template>

<script>
export default {
  name: 'app',
  components: {
  }
}
</script>

components目录

在components目录下新建Book.vue文件

<template>
	<div>
		图书ID: {{ $route.params.id }}
	</div>
</template>

<script>
</script>

<style>
</style>

router目录

编辑router目录的index.js文件，导入Book组件，并添加动态路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'  // 导入vue-router
import News from '@/components/News'
import Books from '@/components/Books'
import Videos from '@/components/Videos'
import Book from '@/components/Book'

Vue.use(VueRouter)  //安装vue-router插件

// 将VueRouter实例作为模块的默认导出
const router = new VueRouter({

  routes: [
    {
      path: '/news',
      component:News
    },
    {
      path: '/books',
      component:Books
    },
    {
      path: '/videos',
      component:Videos
    },
		{
			path: '/book/:id',
			component:Book
		}
  ]
})

export default router;

运行程序

npm run serve

打开浏览器：

注：同一个路由中可以有多个动态段，映射到$route.params中

/user/:username/post/:post_id      - >   /user/evan/post/123    

用法2：查询参数

URL中带有查询参数的形式为/book?id=1,这在传统的Web应用程序中很常见，在单页应用中也支持

在之前的案例上做如下修改：

App.vue

使用<router-link>添加两个导航链接

<template>
  <div id="app">
    <p>
    
      <router-link to="/news">新闻</router-link>
			<router-link to="/books">图书</router-link>
			<router-link to="/videos">视频</router-link>
      <router-link to="/book?id=1">图书1</router-link>
			<router-link to="/book?id=2">图书2</router-link>
    </p>
    <router-view></router-view>
    
  </div>
</template>

<script>
export default {
  name: 'app',
  components: {
  }
}
</script>

components目录

在components目录下新建Book.vue文件

<template>
	<div>
		图书ID: {{ $route.query.id }}
	</div>
</template>

<script>
</script>

<style>
</style>

router目录

编辑router目录的index.js文件，导入Book组件，并添加动态路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'  // 导入vue-router
import News from '@/components/News'
import Books from '@/components/Books'
import Videos from '@/components/Videos'
import Book from '@/components/Book'

Vue.use(VueRouter)  //安装vue-router插件

// 将VueRouter实例作为模块的默认导出
const router = new VueRouter({

  routes: [
    {
      path: '/news',
      component:News
    },
    {
      path: '/books',
      component:Books
    },
    {
      path: '/videos',
      component:Videos
    },
		{
			path: '/book',
			component:Book
		}
  ]
})

export default router;

运行程序

npm run serve

打开浏览器：

用法3：通配符匹配

常规参数只会匹配以"/"分隔的URL片段中的字符。如果想匹配任意路径，可以使用通配符（*）

{
   //将匹配所有路径
   path:'*'
}
{
   //将匹配以 /user-开头的任意路径
   path: '/user-*'
}

含有通配符的路由应该放在最后。

路由{path:'*'}通常用于404错误。