【springboot+vue前后端分离的项目（六）】引入vue-router实现网页（路由组件、非路由组件）跳转

目录

目录

一、知识点总结

（一）项目源码目录设计

（二）Vue 项目：从页面跳转和数据获取划分

（三）页面跳转分为路由组件与非路由组件的跳转

二、使用vue-router实现路由组件的搭建

1、安装 vue-router

2、引入vue-router

3、创建路由实例( router/index.js)

4、静态路由配置(router/routes.js)

5、在 App.vue 中添加  组件 

5、路由跳转

三、非路由组件的使用

非路由组件通常用于实现功能性或可复用的组件。

1、全局组件

2、局部组件 

 3、插槽组件

---

一、知识点总结

（一）项目源码目录设计

（二）Vue 项目：从页面跳转和数据获取划分

1、页面跳转

        Vue 项目中通过 Vue Router 来实现页面之间的跳转，它提供了路由配置、导航守卫等功能。使用 Vue Router 可以轻松实现路由的定义、注册和跳转，并且还可以在跳转的过程中传递参数和数据。

2、数据获取

        Vue 项目中通过 Vue Resource、Axios、Fetch 等工具来实现数据的获取，其中 Axios 是使用最广泛的一种方式。它可以发送 HTTP 请求，并且支持 Promise API，请求成功后返回的数据可以在组件中进行处理和显示。

（三）页面跳转分为路由组件与非路由组件的跳转

1、路由组件一般放置在【pages|views】文件夹，

     非路由组件一般放置在【components】文件夹中

2、路由组件一般需要在router文件夹中进行注册（使用的为组件名字），

     非路由组件在使用的时候，一般都是以标签的形式使用

3、注册完路由，不管是路由组件还是非路由组件，身上都有 $route,$router属性
$route：一般获取路由信息【路径，query，params等等】

$router：一般进行编程式导航进行路由跳转【push|replace】

二、使用vue-router实现路由组件的搭建

1、安装 vue-router

在 Vue 项目中使用 vue-router，需要先进行安装。可以通过 npm 在命令行界面执行以下命令进行安装：

npm install vue-router

2、引入vue-router

在项目的入口文件（main.js）中引入 vue-router。

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  router, // 注册路由器
}).$mount('#app')

3、创建路由实例( router/index.js)

在使用 vue-router 前，需要先创建一个路由实例。

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

// 声明使用插件
Vue.use(VueRouter)
// 向外默认暴露路由器对象
export default new VueRouter({
  mode: 'history', // 没有#的模式
  routes, // 注册所有路由
})

4、静态路由配置(router/routes.js)

// 引入需要跳转的组件
import Home from '@/pages/Home'
import Search from '@/pages/Search'
import Register from '@/pages/Register'
import Login from '@/pages/Login'

/* 
// 配置路由映射关系
*/
export default [
  {
    path: '/',
    component: Home
  },
  {
    path: '/search',
    component: Search
  },
  {
    path: '/register',
    component: Register
  },
  {
    path: '/login',
    component: Login
  }
]

5、在 App.vue 中添加  组件 

5、路由跳转

在 Vue 项目中，可以通过  标签或 $router.push() 方法进行路由跳转。

使用 标签进行路由跳转：

在组件内部通过编程式导航实现页面跳转

如果需要在组件内部进行页面跳转，可以使用 push 或 replace 方法来实现：

methods: {
  jumpToAbout() {
    this.$router.push('/about')  // 使用 push 方法跳转
    // 或者使用 replace 方法跳转（不会留下浏览器历史记录）
    // this.$router.replace('/about')
  }
}

通过前述步骤，可以在 Vue 项目中实现路由导航的功能。

三、非路由组件的使用

非路由组件通常用于实现功能性或可复用的组件。

1、全局组件

        全局组件是指可以在所有 Vue 实例中使用的组件。我们可以通过 Vue.component() 方法来定义全局组件，并且可以在任意 Vue 实例中使用这个组件。

        例如，在 main.js 中定义一个名为 MyComponent 的全局组件：

import Vue from 'vue'
import MyComponent from './components/MyComponent.vue'

Vue.component('my-component', MyComponent)

然后在其他组件中就可以像使用原生 HTML 标签一样使用这个组件：

2、局部组件 

        局部组件是指只能在其父组件内使用的组件。我们可以在父组件的 components 选项中定义局部组件，并且只有在这个父组件内部才能使用这个组件。

        例如，在父组件中定义一个名为 MyChildComponent 的局部组件：

import MyChildComponent from './MyChildComponent.vue'

export default {
  name: 'MyParentComponent',
  components: {
    MyChildComponent
  }
}

        然后在其他组件中就可以像使用原生 HTML 标签一样使用这个组件：

 3、插槽组件

        插槽组件是指可以接受父组件传递过来的模板内容，并将其插入到自身模板中的组件。我们可以在组件中定义一个或多个插槽，然后在父组件中使用这些插槽来传递模板内容。

        例如，在 MySlotComponent 中定义两个插槽：

然后在父组件中使用这些插槽：

在父组件中使用了两个插槽，分别是 header 和 footer。子组件会将这些插槽中的模板内容插入到自身模板中对应的位置。

综上所述，Vue 项目中非路由组件有如下三种使用方式：

• 全局组件：可以在所有 Vue 实例中使用；

• 局部组件：只能在其父组件内使用；

• 插槽组件：能够接受父组件传递过来的模板内容，并将其插入到自身模板中。

四、路由组件的配置

（一）、组件显示与隐藏 

        在 Vue Router 中，可以使用路由元信息（meta）来定义一些额外的信息，这些信息不会直接与路由匹配，但是可以在路由组件中通过 this.$route.meta 来获取到。

结合 v-show 指令，我们可以使用路由元信息来控制组件的显示和隐藏。具体实现步骤如下：

1、在路由配置中定义路由元信息

例如，在路由配置中定义一个元信息 hidden，作为组件显示或隐藏的依据：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      meta: {
        hidden: false
      }
    },
    {
      path: '/about',
      component: About,
      meta: {
        hidden: true
      }
    }
  ]
})

这里的 meta.hidden 表示一个 boolean 类型的值，用来控制组件的显示和隐藏。

2、在路由组件中结合 v-show 使用路由元信息

在组件中使用 v-show 指令，并结合路由元信息 meta.hidden 来控制组件的显示和隐藏：

在这个例子中，使用 ! 符号将 $route.meta.hidden 的值取反，这样当 hidden 值为 true 时，v-show 就变成了 v-show="false"，从而实现了隐藏组件的效果。

需要注意的是，使用路由元信息来实现组件的显示和隐藏只是一种方法，具体的实现方式需要根据需求来选择。如果需要频繁切换组件的显示状态，可以考虑使用 v-show 指令；如果显示状态不需要频繁改变，可以使用 v-if 指令来控制组件的显示和隐藏。

（二）重定向

在 Vue Router 中，可以使用重定向（Redirect）来将一个 URL 地址重定向到另一个地址。重定向的作用是访问一个路由时，自动将请求转发到另一个路由上，从而实现页面跳转的效果。

重定向的实现方式有两种：一种是通过路由配置中的 redirect 字段来实现；另一种是通过路由组件的钩子函数来实现。

1、通过路由配置实现重定向

在路由配置中，可以使用 redirect 字段来实现重定向功能。例如，下面的代码将路径 /home 重定向到 /about 路径：

const routes = [
  {
    path: '/home',
    redirect: '/about'
  },
  {
    path: '/about',
    component: About
  }
]

这样，当访问 /home 路径时，会自动将请求重定向到 /about，并展示 About 组件。

2、通过路由组件钩子实现重定向

除了在路由配置中实现重定向，我们还可以通过路由组件的钩子函数来实现。具体的方法是在路由组件的钩子函数中使用 $router.push 或 $router.replace 方法来重定向到另一个路由。例如，在 Home 组件中实现重定向到 About 组件的代码如下：

export default {
  mounted() {
    this.$router.replace('/about')
  }
}

这样，当 Home 组件被渲染到页面上时，会自动调用 mounted 钩子函数，并执行 $router.replace 方法将请求重定向到 /about 路径。

需要注意的是，路由重定向可以实现页面跳转的效果，但是如果不谨慎使用，也可能会造成死循环等问题。因此，在使用重定向时一定要仔细思考，避免出现不必要的问题。

（三）路由传参

 在 Vue Router 中，路由传参可以分为两种方式：params 参数和 query 参数。

1、使用 params 参数传递参数

我们可以在路由配置中使用 params 参数来传递用户 ID。具体实现方法如下：

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/user/:id',
    name: 'user',
    component: User
  }
]

const router = new VueRouter({
  routes
})

// 在 Home 组件中，实现跳转到 User 组件，并传递用户 ID 参数

在上述代码中，我们在路由配置中添加了一条 /user/:id 的路由记录，其中 :id 表示一个动态参数，用于传递用户 ID。在 Home 组件中，我们使用 router-link 组件将用户的名称包裹起来，点击用户名时会跳转到 User 组件，并将用户 ID 通过 params 参数传递给 User 组件。

在 User 组件中，我们可以通过 $route.params.id 来获取用户 ID。具体实现方法如下：

2、使用 query 参数传递参数

与使用 params 参数不同，如果我们使用 query 参数来传递用户 ID，那么需要在路由链接中添加一个查询参数，具体实现方法如下：

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/user',
    name: 'user',
    component: User
  }
]

const router = new VueRouter({
  routes
})

// 在 Home 组件中，实现跳转到 User 组件，并传递用户 ID 参数

在上述代码中，我们在路由配置中将 /user/:id 的路由记录修改为了 /user，同时在 router-link 中使用 query 参数来传递用户 ID。

在 User 组件中，我们可以通过 $route.query.id 来获取用户 ID。具体实现方法如下：

3、params 参数和 query 参数的区别

（1）参数位置不同

        使用 params 参数时，参数会被添加到 URL 的路径中，如 /user/:id 中的 :id 就是一个动态参数，用于传递用户 ID。而使用 query 参数时，参数会被添加到 URL 的查询字符串中，如 /user?id=123 中的 id 就是一个查询参数，用于传递用户 ID。

（2）URL 格式不同

        由于位置不同，params 参数会直接将参数添加到 URL 的路径中，因此 URL 的格式会更加友好。而 query 参数则会将参数添加到 URL 的查询字符串中，因此 URL 的格式可能会比较长和复杂。

（3）匹配方式不同

        使用 params 参数时，需要在路由配置中定义动态参数，并根据实际参数进行匹配。例如，在路由配置中定义了一个 /user/:id 路径，当用户访问 /user/123 时，路由就会匹配到这条记录，并将动态参数 id 的值设置为 123。

而使用 query 参数时，可以在任何路径中添加查询参数，例如 /user?id=123、/product?id=456 等。因此，不需要在路由配置中定义查询参数，也不需要进行路由匹配。

（4）使用方式不同

        使用 params 参数时，通常用于向页面传递动态参数，例如传递文章 ID、用户 ID 等。可以通过 $route.params.id 的方式从组件中获取参数值。

而使用 query 参数时，通常用于进行搜索、筛选等操作，例如搜索关键词、筛选价格区间等。可以通过 $route.query.keyword 的方式从组件中获取参数值。