15.JavaWeb-路由

LB_bei

已于 2023-07-13 10:41:18 修改

阅读量1k

点赞数

分类专栏： JavaEE 文章标签：前端 javascript 开发语言 vue.js

于 2023-07-10 13:38:01 首次发布

本文链接：https://blog.csdn.net/LB_bei/article/details/131631440

版权

JavaEE 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

1.路由

路由（Routing）是指确定应用程序中不同页面或视图之间导航的过程。在 Web 开发中，路由用于将特定的 URL 映射到相应的页面或处理逻辑。（就是用来跳转页面的）

2.动态路由的概念

动态路由是在构建应用程序时根据不同的 URL 路径生成路由规则的一种方法。它允许你根据特定的参数或模式来定义路由，以便根据用户的输入或其他条件动态生成不同的页面或组件

3.动态路由的实现

在前端框架中，如Vue.js或React，你可以使用路由库（如Vue Router或React Router）来实现动态路由。

3.1 创建js配置文件

1.通过import语句导入了Vue和Vue Router库，以及多个组件（Index、Cart、Helloworld等）。

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/index'
import GoodsView from '@/components/goodsView'
import Confirm from '@/components/confirm'

2.通过Vue.use(Router)安装Vue Router插件。

Vue.use(Router)

3.创建了一个Router实例并导出，通过export default语句将其作为模块的默认导出。该实例通过new Router()创建，并传入一个配置对象。

4.在配置对象中，使用routes属性指定了路由规则数组，每个规则包含path和component属性。其中，path表示路径规则，component表示对应的组件。

    {
      path: '/',          //当前项目根路径
      component: Index    //对应组件
    },

5.路径规则可以是具体的路径字符串（如'/'、'/cart'、'/hello'等），也可以包含动态参数（如'/goodslist/:cid'、'/goodsView/:id'等）。动态参数使用冒号:指定，参数名在冒号后面。

export default new Router({
  routes: [
    {
      path: '/',          //当前项目根路径
      component: Index    //对应组件
    },
      path: '/goodsView/:id',    //goodsView/{id}类似
      component: GoodsView
    },
    {
      path: '/confirm',  
      name: "Confirm",
      component: Confirm
    },
  ],
  mode:"history"
})

在配置中，还可以添加其他属性，如name属性用于命名路由。

6.通过mode: "history"配置了路由模式为history模式，这样URL中就不会显示#符号。

mode:"history"

3.2 传递路由参数

3.2.1 Params（路径参数）

3.2.1.1 通过 params 传参

第一种：

【传递单个数据】

this.$router.push("/detail/" + id)

【传递对象】

this.$router.push({
    name: "Confirm", // 路由名字
    params:{
        carts : this.multipleSelection
    }
})

第二种：

<router-link to="/goodslist/5" tag="a" class="column-btn">去看看</router-link>

3.2.1.2 params获取数据

【获取单个数据】

data(){
    return{
      cid: this.$route.params.cid
    }
  }

【获取数据】

data(){
    return {
      carts: this.$route.params.carts
    }
  }

3.2.1.3 params定义路由

const routes = [
    {
      path:"/goodslist/:cid",  
      component: Goodslist
    }
]

3.2.2 Query（查询参数）

3.2.2.1 通过 Query传参

this.$router.push('/allGoods?search='+this.search);

3.2.2.2 params获取数据

search:this.$route.query.search,

3.2.2.3 Query定义路由

用户访问 "/allGoods" 路由并在 URL 中附带 search 查询参数时，该参数将被传递给 AllGoods 组件，并作为组件的 props 属性中的 search 值。在 AllGoods 组件中，可以通过访问 this.search 来获取传递的 search 值。

{
    path: '/allGoods',  
    component: AllGoods,
    props: (route) => ({ search: route.query.search })
},

4.守卫路由

在进行路由时，守卫路由提供在路由前、路由后执行某段特殊的代码，例如可以用来判断用户是否登录，如果没有登录则跳转到登录页面，如果登录了则放行

4.1 前置钩子

在某个操作之前触发的钩子函数，使用钩子函数需要注意，此时的路由配置不能直接export导出，需要 let router = new Router({}) 再导出，这样钩子函数才有操作对象

router.beforeEach((to, from, next) => {
  console.log("前置钩子");
  //判断要去的路由是不是manage
  let user = window.localStorage.getItem("user")
  if (to.path == "/manage") {
    if (user==null||JSON.parse(user).role.name == "comsumer") {
      next(from.path)
      return
    }
  }
  //放行
  next(true)
})

to	表示即将要进入的目标路由对象
from	表示当前导航正要离开的路由对象
next	一个回调函数，用于控制导航行为
	next()	允许导航到目标路由（next(ture)）
	next(false)	阻止导航，取消当前的导航操作
	next(path)	重定向到指定的路径

4.2 后置钩子

在某个操作之后触发的钩子函数

router.afterEach((to,from)=>{
  console.log("后置钩子");
});

5.二级路由

二级路由是指在 Vue Router 中，路由配置中的嵌套路由。通过嵌套路由，可以在一个父路由下定义多个子路由，形成层级结构。这种层级关系可以用于创建复杂的页面布局和组织页面功能模块。

二级路由与一级路由一样也需要导入

import GoodsManage from '@/components/goodsmanage'
import Killmanage from '@/components/killmanage'

在一级路由的children属性中设置，二级路由的path不能以 / 开头

{
  path: '/manage',  
  component: Manage,
  children: [//子路由，不能由/开头
    {
      path: "/",
      component:GoodsManage
    },
    {
      path: 'goodsmanage',  
      component: GoodsManage,
    },
    {
      path: 'killmanage',  
      component: Killmanage,
    },
  ]
},