vue中的路由

最新推荐文章于 2023-09-06 15:06:28 发布

Authorization-

最新推荐文章于 2023-09-06 15:06:28 发布

阅读量1k

点赞数 1

文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.youkuaiyun.com/m0_57923701/article/details/120258249

版权

本文详细介绍了Vue.js中的前端路由Vue Router的使用，包括路由的作用、优点、基本配置、路由规则创建、组件内使用、路由参数传递、重定向、404页面设置、路由模式、编程式导航以及路由的嵌套和守卫。讲解了Vue Router如何实现页面之间的平滑切换，以及在实际项目中如何配置和操作路由。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端路由作用: 实现业务场景切换

因为Vue是单页面应用(SPA): 所有功能在一个html页面上实现

路由的优点：

整体不刷新页面，用户体验更好

数据传递容易, 开发效率高 #哈希值后面传入参数

过程：

首次加载会比较慢一点。不利于seo

vue-router基本使用

官网: Vue Routerhttps://router.vuejs.org/zh/

vue-router模块包它和 Vue.js 深度集成

安装：

yarn add vue-router or npm install vue-router

main.js 入口：需要配置下

import VueRouter from 'vue-router'

// 在vue中，使用使用vue的插件，都需要调用Vue.use()  使用路由插件
Vue.use(VueRouter);


// 创建路由规则数组。及引入组件
const routes = [
  {
    path: "/find",   // 
    component: Find
  },
  {
    path: "/my",
    component: My
  },
  {
    path: "/part",
    component: Part
  }
]
// 创建路由对象 -  传入规则
const router = new VueRouter({
  routes
})


// 关联到vue实例
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

组件内：

<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/part">朋友</a>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

vue-router提供了一个全局组件 router-link

router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)

router-link提供了声明式导航高亮的功能(自带类名)

路由传参：

在跳转路由时, 可以给路由对应的组件内传值

在router-link上的to属性传值, 语法格式如下：

- /path?参数名=值
- /path/:定义好参数名 – 需要路由对象提前配置 path: “/path/参数名”

第一步：修改路由

  {
    path: "/my",
    component: Part
  },
  {
    path: "/my/:username", // 有:的路径代表要接收具体的值
    component: Part
  },

第二步：手动给URL地址栏路由上添加要传递参数

/my?name=zs

/my/ls

第三步：获取数据当前组件 My内接受这些数据

/my?name=zs vue组件内：$route.query.name
/my?age=18 vue组件内：$route.query.age

/my/ls vue组件内：$route.params.username

路由的重定向和模式

重定向

const routes = [
  {
    path: "/", // 默认hash值路径
    redirect: "/find" // 重定向到/find
    // 浏览器url中#后的路径被改变成/find-重新匹配数组规则
  }
]

redirect是设置要重定向到哪个路由路径

强制重定向后, 还会重新来数组里匹配一次规则

404页面

如果路由hash值, 没有和数组里规则匹配，默认给一个404页面

语法: 路由最后, path匹配*(任意路径) – 前面不匹配就命中最后这个, 显示对应组件页面

views中创建一个404页面

<template>
  <img src="../assets/404.png" alt="">
</template>

<script>
export default {

}
</script>

<style scoped>
    img{
        width: 100%;
    }
</style>

路由中的配置

//1.引入组件
import NotFound from '@/views/NotFound'
//2.配置路由规则
const routes = [
  // ...省略了其他配置
  // 404在最后(规则是从前往后逐个比较path)
  {
    path: "*",
    component: NotFound
  }
//如果路由未命中任何规则, 给出一个兜底的404页面
]

模式设置

两种模式 hash模式和history模式

history路由 (以后上线需要服务器端支持, 否则找的是文件夹)

具体配置

const router = new VueRouter({
  routes,
  mode: "history" // 打包上线后需要后台支持, 模式是history
})

编程式导航(路由跳转)

语法:

this.$router.push({
    path: "路由路径", // 都去 router/index.js定义
    name: "路由名"
})

注意：除了push，还有replace，和go方法，都可以实现路由跳转

push方法会有历史记录，而replace不会（个人的简单理解）

具体看下图：

路由数组里, 通过name属性可以给路由起名字

{
    path: "/find",
    name: "Find",
    component: Find
},
{
    path: "/my",
    name: "My",
    component: My
},
{
    path: "/part",
    name: "Part",
    component: Part
},

跳转传参

语法： query / params 任选一个（个人比较喜欢query传参）

// 好理解写法：
this.$router.push({
    // path:"/one?id="+id
    path:"/one/"+id
});


//query官方：
this.$router.push({
  path: "/one",
  query:{
    // 参数名：形参
    id:id,
   },
 });


//params官方:
this.$router.push({
  name:"one",
  params:{
     id:id
   }
 });

// 对应路由接收   $route.params.参数名   取值
// 对应路由接收   $route.query.参数名    取值

路由的嵌套和守卫

嵌套：

1.配置路由出口（router-view）

2.配置路由规则

const routes = [
  // ...省略其他
  {
    path: "/find",
    name: "Find",
    component: Find,
    children: [
      {
        path: "recommend",
        component: Recommend
      },
      {
        path: "ranking",
        component: Ranking
      },
      {
        path: "songlist",
        component: SongList
      }
    ]
  }
  // ...省略其他
]

路由的全局前置守卫

语法:

router.beforeEach((to, from, next)=>{//路由跳转"之前"先执行这里, 决定是否跳转})
参数1: 要跳转到的路由 (路由对象信息) 目标
参数2: 从哪里跳转的路由 (路由对象信息) 来源
参数3: 函数体 - next()才会让路由正常的跳转切换, next(false)在原地停留, next("强制修改到另一个路由路径上")

router.beforeEach((to, from, next) => {
  if (to.path === "/my" && isLogin === false) {
    alert("请登录")
    next(false) // 阻止路由跳转
  } else {
    next() // 正常放行
  }
})

总结：