vue2中搜索路由功能

在Vue2中搜索路由功能可以通过使用Vue Router来实现。

首先，在Vue项目中安装Vue Router：

npm install vue-router --save

然后，在项目中创建一个router.js文件，用于定义路由信息：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
import Contact from './views/Contact.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/contact',
      name: 'contact',
      component: Contact
    }
  ]
});

在上面的代码中，我们定义了三个路由：首页、关于我们和联系我们。现在我们可以在App.vue中使用<router-view>组件来渲染路由组件：

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

<script>
import router from './router';

export default {
  name: 'App',
  router
}
</script>

这样，当用户访问根路径时，会自动渲染Home组件，访问/about时渲染About组件，访问/contact时渲染Contact组件。

如果你想要在页面中使用搜索功能，可以在路由配置中添加一个动态路由来处理搜索关键字，例如：

{
  path: '/search/:query',
  name: 'search',
  component: Search
}

这样，用户访问/search/关键字时，会自动渲染Search组件，并且可以在组件中通过$route.params.query来获取搜索关键字。